layui实现同页面显示多种时间样式

layui实现同页面显示多种时间样式代码如下：

 <script> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看 <a class="layui-btn layui-btn-xs" lay-event="edit">编辑 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</script> layui {{ layui.v }} 提供强力驱动  <script></script><script>layui.config({ version: &#39;1591161919722&#39; //为了更新 js 缓存，可忽略}); layui.use([&#39;laydate&#39;, &#39;laypage&#39;, &#39;layer&#39;, &#39;table&#39;, &#39;carousel&#39;, &#39;upload&#39;, &#39;element&#39;, &#39;slider&#39;], function(){ var laydate = layui.laydate //日期 ,laypage = layui.laypage //分页 ,layer = layui.layer //弹层 ,table = layui.table //表格 ,carousel = layui.carousel //轮播 ,upload = layui.upload //上传 ,element = layui.element //元素操作 ,slider = layui.slider //滑块 //向世界问个好 layer.msg(&#39;Hello World&#39;); //监听Tab切换 element.on(&#39;tab(demo)&#39;, function(data){ layer.tips(&#39;切换了 &#39;+ data.index +&#39;：&#39;+ this.innerHTML, this, { tips: 1 }); }); //执行一个 table 实例 table.render({ elem: &#39;#demo&#39; ,height: 420 ,url: &#39;/demo/table/user/&#39; //数据接口 ,title: &#39;用户表&#39; ,page: true //开启分页 ,toolbar: &#39;default&#39; //开启工具栏，此处显示默认图标，可以自定义模板，详见文档 ,totalRow: true //开启合计行 ,cols: [[ //表头 {type: &#39;checkbox&#39;, fixed: &#39;left&#39;} ,{field: &#39;id&#39;, title: &#39;ID&#39;, width:80, sort: true, fixed: &#39;left&#39;, totalRowText: &#39;合计：&#39;} ,{field: &#39;username&#39;, title: &#39;用户名&#39;, width:80} ,{field: &#39;experience&#39;, title: &#39;积分&#39;, width: 90, sort: true, totalRow: true} ,{field: &#39;sex&#39;, title: &#39;性别&#39;, width:80, sort: true} ,{field: &#39;score&#39;, title: &#39;评分&#39;, width: 80, sort: true, totalRow: true} ,{field: &#39;city&#39;, title: &#39;城市&#39;, width:150} ,{field: &#39;sign&#39;, title: &#39;签名&#39;, width: 200} ,{field: &#39;classify&#39;, title: &#39;职业&#39;, width: 100} ,{field: &#39;wealth&#39;, title: &#39;财富&#39;, width: 135, sort: true, totalRow: true} ,{fixed: &#39;right&#39;, width: 165, align:&#39;center&#39;, toolbar: &#39;#barDemo&#39;} ]] }); //监听头工具栏事件 table.on(&#39;toolbar(test)&#39;, function(obj){ var checkStatus = table.checkStatus(obj.config.id) ,data = checkStatus.data; //获取选中的数据 switch(obj.event){ case &#39;add&#39;: layer.msg(&#39;添加&#39;); break; case &#39;update&#39;: if(data.length === 0){ layer.msg(&#39;请选择一行&#39;); } else if(data.length > 1){ layer.msg(&#39;只能同时编辑一个&#39;); } else { layer.alert(&#39;编辑 [id]：&#39;+ checkStatus.data[0].id); } break; case &#39;delete&#39;: if(data.length === 0){ layer.msg(&#39;请选择一行&#39;); } else { layer.msg(&#39;删除&#39;); } break; }; }); //监听行工具事件 table.on(&#39;tool(test)&#39;, function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值" var data = obj.data //获得当前行数据 ,layEvent = obj.event; //获得 lay-event 对应的值 if(layEvent === &#39;detail&#39;){ layer.msg(&#39;查看操作&#39;); } else if(layEvent === &#39;del&#39;){ layer.confirm(&#39;真的删除行么&#39;, function(index){ obj.del(); //删除对应行（tr）的DOM结构 layer.close(index); //向服务端发送删除指令 }); } else if(layEvent === &#39;edit&#39;){ layer.msg(&#39;编辑操作&#39;); } }); //执行一个轮播实例 carousel.render({ elem: &#39;#test1&#39; ,width: &#39;100%&#39; //设置容器宽度 ,height: 200 ,arrow: &#39;none&#39; //不显示箭头 ,anim: &#39;fade&#39; //切换动画方式 }); //将日期直接嵌套在指定容器中 var dateIns = laydate.render({ elem: &#39;#laydateDemo&#39; ,position: &#39;static&#39; ,calendar: true //是否开启公历重要节日 ,mark: { //标记重要日子 &#39;0-10-14&#39;: &#39;生日&#39; ,&#39;2020-01-18&#39;: &#39;小年&#39; ,&#39;2020-01-24&#39;: &#39;除夕&#39; ,&#39;2020-01-25&#39;: &#39;春节&#39; ,&#39;2020-02-01&#39;: &#39;上班&#39; } ,done: function(value, date, endDate){ if(date.year == 2017 && date.month == 11 && date.date == 30){ dateIns.hint(&#39;一不小心就月底了呢&#39;); } } ,change: function(value, date, endDate){ layer.msg(value) } }); //分页 laypage.render({ elem: &#39;pageDemo&#39; //分页容器的id ,count: 100 //总页数 ,skin: &#39;#1E9FFF&#39; //自定义选中色值 //,skip: true //开启跳页 ,jump: function(obj, first){ if(!first){ layer.msg(&#39;第&#39;+ obj.curr +&#39;页&#39;, {offset: &#39;b&#39;}); } } }); //上传 upload.render({ elem: &#39;#uploadDemo&#39; ,url: &#39;https://httpbin.org/post&#39; //改成您自己的上传接口 ,done: function(res){ layer.msg(&#39;上传成功&#39;); layui.$(&#39;#uploadDemoView&#39;).removeClass(&#39;layui-hide&#39;).find(&#39;img&#39;).attr(&#39;src&#39;, res.files.file); console.log(res) } }); //滑块 var sliderInst = slider.render({ elem: &#39;#sliderDemo&#39; ,input: true //输入框 }); //底部信息 var footerTpl = lay(&#39;#footer&#39;)[0].innerHTML; lay(&#39;#footer&#39;).html(layui.laytpl(footerTpl).render({})) .removeClass(&#39;layui-hide&#39;);});</script>

效果如下：

更多layui知识请关注PHP中文网layui教程栏目