TP5.1 + layui时间范围设置方法

XuPing.Yang
发布: 2021-08-12 09:03:22
原创
1436 人浏览过

最近在制作一个项目时遇到一个问题,就是开始时间和结束时间是相关联的,结束时间的选择范围是最小为开始时间,最大为开始时间90天后的时间,我这边用的是layui的插件获取的日期,里面有两个参数min和max分别可以设置日期范围;

其代码如下所示:

layui.use('laydate', function(){ var laydate = layui.laydate; //限定可选日期 var ins22 = laydate.render({ elem: '#test-limit1' ,min: '2016-10-14' ,max: '2080-10-14' }); });
登录后复制

但是怎么获取max和min的值时,我遇到了难点,后面经过反复研究Layui官方文档和反复的尝试,终于解决了这一问题,分享给大家:

a.定义变量当前时间、最小时间、最大时间

var now = new Date(); var min = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + (now.getDate() + 1); var max = now.getFullYear() + "-" + (now.getMonth() + 2) + "-" + (now.getDate() + 2);
登录后复制

b.根据当前选择的时间重新给max和min赋值

要获取maxmin的值,首先要了解时间换算单位,大概思路为基本换算单位以小时为准,1小时为3600秒,因为laui中的时间戳是以毫秒为计算单位,所以需要再3600的基础上再乘以1000,一天为24小时,总共90天所以是90*24*3600*1000.

在选择了开始时间后done: function (value, date)中value的值为当前选择的时间,将该值转化为时间戳为:var date1 = new Date(value).getTime();

90天后的时间戳为:var date2 = date1 + 90 * 24 * 3600 * 1000;

再将获取的时间转化为年月日:

var date5 = { 'date': date3.getDate(), 'month': date3.getMonth() + 1, 'year': date3.getFullYear() };
登录后复制

将获取到的值赋值给结束时间的最小值和最大值:

end.config.max = date5; end.config.max.month = date5.month - 1; end.config.min = date; end.config.min.month = date.month - 1;
登录后复制

所以完整的代码为:

var start = laydate.render({ elem: '#bx_start', type: 'date', max: max, min: min, showBottom: false, btns: ['clear', 'confirm'], done: function (value, date) { var date1 = new Date(value).getTime();//将当前选择的时间转化为时间戳 var date2 = date1 + 90 * 24 * 3600 * 1000;//获取90天后的时间 var date3 = new Date(date2); var date5 = { 'date': date3.getDate(), 'month': date3.getMonth() + 1, 'year': date3.getFullYear() }; end.config.max = date5; end.config.max.month = date5.month - 1; end.config.min = date; end.config.min.month = date.month - 1; } });
登录后复制

c.将获取的min和max传给结束时间

var end = laydate.render({ elem: '#bx_end', type: 'date', max: max, min: min, showBottom: false, 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; } });
登录后复制

以下为完整代码

登录后复制

相关文章推荐:《TP5.1 为图片添加水印功能》《TP5.1+layui实现栏目数的调用》《最新的10个thinkphp视频教程

以上是TP5.1 + layui时间范围设置方法的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
TP5.1教程第十章三小节的用户注册章节,不能显示bootstrap的菜单下拉,也不能script验 天棚老师TP5.1教程第十章三小节的用户注册功能初步实现不能显示bootstrap的下拉菜单不能弹出第二个问题,script验证也不能实现