layui时间控件选择时间

码农天地 - 2020-06-16 13:51:40

---

解决layui时间控件清空之后无法正常使用的问题，以及时间范围的选择

共有两种解决方式：

方式一(layui 1.x)：

html代码：

<div class="layui-inline"><div class="layui-input-inline"><input type="text" name="start_time" class="layui-input" id="start_time"placeholder="开始时间(修改时间)"></div></div><div class="layui-inline"><div class="layui-input-inline"><input type="text" name="end_time" class="layui-input" id="end_time"placeholder="结束时间(修改时间)"></div></div>js代码：var start = {istime: true,format: 'YYYY-MM-DD hh:mm:ss',max: '2099-06-16 23:59:59',istoday: true,choose: function (datas) {end.min = datas; //开始日选好后，重置结束日的最小日期}};var end = {istime: true,format: 'YYYY-MM-DD hh:mm:ss',max: '2099-06-16 23:59:59',istoday: true,choose: function (datas) {start.max = datas; //结束日选好后，重置开始日的最大日期}};document.getElementById('start_time').onclick = function () {start.elem = this;laydate(start);};document.getElementById('end_time').onclick = function () {end.elem = this;laydate(end);};

方式二(layui 2.x)：

html代码

<div class="layui-inline"><div class="layui-input-inline"><input type="text" name="start_time" class="layui-input" id="start_time"placeholder="开始时间(修改时间)"></div></div><div class="layui-inline"><div class="layui-input-inline"><input type="text" name="end_time" class="layui-input" id="end_time"placeholder="结束时间(修改时间)"></div></div>js代码layui.use([ 'laydate'], function(){var $ = layui.$;var laydate = layui.laydate;var nowTime = new Date().valueOf();var max = null;var start = laydate.render({elem: '#start_time',type: 'datetime',max: nowTime,btns: ['clear', 'confirm'],done: function(value, date){endMax = end.config.max;end.config.min = date;end.config.min.month = date.month -1;}});var end = laydate.render({elem: '#end_time',type: 'datetime',max: nowTime,done: function(value, date){if($.trim(value) == ''){var curDate = new Date();date = {'date': curDate.getDate(), 'month': curDate.getMonth()+1, 'year': curDate.getFullYear()};}start.config.max = date;start.config.max.month = date.month -1;}});

根据开始时间 动态限制结束时间 知识点 type: 'datetime', 是带时分秒的 date 是不带时分秒的

layui.use('laydate', function(){ /* lay('.layui-input').each(function(){ laydate.render({ elem: this ,trigger: 'click' ,change: function(value, date, endDate){ console.log(value); //得到日期生成的值，如：2017-08-18 console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0} console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。 } });}); */var $ = layui.$; var laydate = layui.laydate; var nowTime = new Date().valueOf(); var max = null; var start = laydate.render({ elem: '#start_time', type: 'datetime', btns: ['clear', 'confirm'], done: function(value, date){ endMax = end.config.max; end.config.min = date; end.config.min.month = date.month -1; }, change: function(value, date, endDate){ var timestamp2 = Date.parse(new Date(value));timestamp2 = timestamp2 / 1000; end.config.min = timestamp2; end.config.min.month = date.month -1; } }); var end = laydate.render({ elem: '#end_time', type: 'date', done: function(value, date){ console.log(" ====== "+date); if($.trim(value) == ''){ var curDate = new Date(); date = {'date': curDate.getDate(), 'month': curDate.getMonth()+1, 'year': curDate.getFullYear()}; } start.config.max = date; start.config.max.month = date.month -1; } });});

通过以上代码，就已经可以实现动态改变开始时间最大值与结束时间最小值的改变了。下面来说一下容易遇到的坑：

坑一 ：laydate.render无法重复渲染，当laydate.render对应一个elem已经渲染过一次之后，我们是无法通过再次渲染来修改其中的max值与min值的。

坑二 ：startDate.config.max与endDate.config.min是一个对象，不是一个字符串，endDate.config.min="2017-01-01"；实际这里得到的是一个对象，不同于在我们渲染时的min与max了，直接将字符串赋值必然没有效果。

坑三：dates的格式虽然与endDate.config.min格式相同但是直接让endDate.config.min=dates你会发现并不是你想要的结果，是因为虽然dates中的数据是你选择的日期，可是endDate.config.min中设置的month的值却比你输入的month的值大了一个月，因此假如你选的开始日期是11月13日，直接赋值给了endDate.config.min之后你会发现结束日期的最小日期变成了12月13日，因此我们需要将dates中的月份值减一后再赋值给endDate.config.min。

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

以上就是layui时间控件选择时间的详细内容，更多请关注php中文网其它相关文章！

微信分享相关标签：layui本文转载于：CSDN，如有侵犯，请联系a@php.cn删除上一篇：详解layuiAdmin单页版根据后台json数据动态生成左侧菜单栏下一篇：layui实现登录功能的方法

相关文章

相关视频

layui如何实现表格单元格合并layui实现数据表格及分页的方法layui表单验证介绍详解layui单选按钮不能正常显示及解决办法layui时间控件选择时间管理员页面布局（layui表格）产品列表页（layui表格+图标）简述layui文件上传及课程小结

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论立即提交专题推荐独孤九贱-php全栈开发教程

全栈 100W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

玉女心经-web前端开发教程

入门 50W+

主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

天龙八部-实战开发教程

实战 80W+

主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

尚

认证0级讲师

最近文章基于layui实现select区域联动711layui实现登录功能的方法21310个Redis使用技巧681发布技术文章最新文章热门排行

layui弹出层闪退解决基于layui实现select区域联动layui实现登录功能的方法layui时间控件选择时间详解layuiAdmin单页版根据后台json数据动态生成左侧菜单栏layui实现点击按钮添加一行的方法详解layui单选按钮不能正常显示及解决办法layui关联表单的方法

layui框架的优点和缺点是什么layui如何使用按钮事件layui列表怎么取input框的值layui怎么用layui标签输入框inputTags介绍layui导入导出Excel方法Layui时间选择框介绍layui表格怎么把表头固定推荐视频教程layUI前端框架使用详解前端UI框架 — layui视频教程分类php视频教程html视频教程css视频教程JS视频教程jQuery视频教程mysql视频教程Linux视频教程Python视频教程article_status = 469925;网站首页 PHP视频PHP实战PHP代码PHP手册词条手记编程词典

php中文网：公益在线php培训，帮助PHP学习者快速成长！ 合肥彼岸互联信息技术有限公司

Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 皖B2-20150071-9 皖公网安备 34010402701654号 关于我们免责申明赞助与捐赠广告合作

座机号码：0551-64933227  安徽省合肥市政务新区置地广场D座2101

  var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?8cc45d54c337ca616c34b1cf747da91c";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();$('.content').viewer();

Tags 标签