开源一夏 | layui 时间控件 laydate 重置失效

作者：六月的雨在infoQ

2022 年 8 月 11 日
北京
本文字数：1597 字
阅读完需：约 5 分钟

问题描述

layui 日期控件 laydate 引入页面后，页面开始时间小于结束时间，结束时间最大为当前时间，展示效果如图，第一次选择开始时间和结束时间

重置之后第二次选择开始时间和结束时间，效果如图

开始时间的最大日期不在是 4.15 号，而是上次选择的 4.13 号，我们再看结束时间

结束时间的最小日期不再是默认的 1900-01-01，而是第一次选择的开始时间 4.5 号，这样是不是很奇怪呢？

页面代码

<li class="input-daterange input-group">  操作时间：  <input type="text" name="createStartDate" readonly id="createStartDate"/>  至  <input type="text" name="createEndDate" readonly id="createEndDate"/></li>

复制代码

js 代码

var startDate;var endDate;	function initLaydate() {		layui.use('laydate', function() {			var laydate = layui.laydate;			startDate = laydate.render({				elem: '#createStartDate',				max: $('#createEndDate').val(),				type: 'datetime',				theme: 'molv',				trigger: 'click',				done: function (value, date) {					// 结束时间大于开始时间					if (value !== '') {						endDate.config.min.year = date.year;						endDate.config.min.month = date.month - 1;						endDate.config.min.date = date.date;					} else {						endDate.config.min.year = '';						endDate.config.min.month = '';						endDate.config.min.date = '';					}				}			});			endDate = laydate.render({				elem: '#createEndDate',				//min: $('#createEndDate').val(),				max:$.common.getNowFormatDate(),				type: 'datetime',				theme: 'molv',				trigger: 'click',				done: function (value, date) {					// 开始时间小于结束时间					if (value !== '') {						startDate.config.max.year = date.year;						startDate.config.max.month = date.month - 1;						startDate.config.max.date = date.date;					} else {						startDate.config.max.year = '';						startDate.config.max.month = '';						startDate.config.max.date = '';					}				}			});		})	}

复制代码

getNowFormatDate: function() {        var date = new Date();        var seperator1 = "-";        var seperator2 = ":";        var month = date.getMonth() + 1;        var strDate = date.getDate();        if (month >= 1 && month <= 9) {          month = "0" + month;        }        if (strDate >= 0 && strDate <= 9) {          strDate = "0" + strDate;        }        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate          + " " + date.getHours() + seperator2 + date.getMinutes()          + seperator2 + date.getSeconds();        return currentdate;      }

复制代码

通过看代码整体上感觉没有问题，那么问题在哪儿呢？

问题处理

通过参照 layui 官网文档日期控件，也没能找到原因，于是去百度搜索，看到有人说是重置只能清除 input 框的内容，但是不能清除日期控件的动态时间限制，那么怎么处理呢？网上的方案是重写重置函数，增加 endDate.config.min=startDate.config.min;

startDate.config.max=endDate.config.max;代码

function reset() {      $.form.reset();      endDate.config.min=startDate.config.min;      startDate.config.max=endDate.config.max;    }

复制代码

采用之后却发现第二次问题是解决了但是第三次、第四次重置之后问题仍然存在，最后多方查找没有方案，后来自己探索发现再次初始化一下时间插件，代码如下

function reset() {      $.form.reset();      endDate.config.min=startDate.config.min;      startDate.config.max=endDate.config.max;      initLaydate();    }

复制代码

问题解决，圆满。

发布于: 刚刚阅读数: 5

原文链接:【http://xie.infoq.cn/article/3f79e66b63ffeedf4c8a1d1ec】。

六月的雨在infoQ

关注

让技术不再枯燥，让每一位技术人爱上技术 2022.07.22 加入

还未添加个人简介

发布

暂无评论

创作场景

开源一夏 | layui 时间控件 laydate 重置失效

问题描述

页面代码

问题处理

六月的雨在infoQ

评论