实现的功能： 使用Layui日期弹框控件，将后台获取到的数据库的所有日期，动态展示在前端。 1. 即可将数据库有数据的那一天，展示在前端，方便用户查看。 2. 选中某一天后，页面会加载出当天的数据信息。

---

关键代码

大致流程 1.页面加载日期控件时，会先从中layuiAdmin中localStorge中查找一个叫selectedDate的表，如果selectedDate值为空，就会重新创建一个名为‘selectedDate’，值为“当前选中的日期”。 2.当用户切换日期时（即当前选中的日期和上一次选中的日期不一样），会重新创建一个名为‘selectedDate’，值为“当前选中的日期”的表，覆盖之前存的同名表。

layui.use(['admin', 'laytpl', 'jquery', 'layer', 'laydate'], function () { var setter = layui.setter , admin = layui.admin , laytpl = layui.laytpl , layer = layui.layer , form = layui.form , $ = layui.$ , laydate = layui.laydate; var myLaydate; var mark = {}; //日期弹框控件 myLaydate = laydate.render({ elem: '#test-laydate-theme-molv'//指定元素 , theme: 'molv'//墨绿主题 , value: layui.data('layuiAdmin').selectedDate//初始赋值 , btns: ['confirm']//只出现确定按钮 , mark: mark//自定义标记日期 , done: function (value, date) { //选中后的回调 //写入选择的日期，localDate是上一次选中的日期，value是当前选中的日期 var localDate = layui.data('layuiAdmin').selectedDate; if (localDate == null || localDate != value) {//将选中日期存入localStorge中 layui.data(setter.tableName, { key: 'selectedDate' , value: value }); } window.location.reload();//重新加载当前页面 } }); //请求登入接口,动态是指日期控件的mark admin.req({ url: '/getAllDate' //获取积水日期 , data: {} , method: "get" , done: function (res) { for (var i = 0; i < res.data.length; i++) { console.log(res.data[i].formatTime); mark[res.data[i].formatTime] = '';//js中写json数据的格式，不要写成mark["'"+res.data[i].formatTime+"'"] = ''; } console.log(mark); myLaydate.config.mark = mark; } }); } })

Tip： 关于layui.data 数据操作有疑问，可以看看这个 https://www.cnblogs.com/liujie-php/p/13265481.html

数据显示部分的关键代码： 从内存中取出‘将当前选中的日期’，并将值赋给selectedDate，使它作为参数传给后台，后台再进行数据库操作，将需要的数据返回给前端加载出来。

function show() { $.ajax({ url: '/getLevel1Info', type: 'POST', dataType: 'json', data: {"selectedDate": layui.data('layuiAdmin').selectedDate}, //从浏览器缓存中获取selectedDate的值，传给后台 success: function (data) { ......//将当天的数据显示在页面上 } }) }