layui的laydate时间选择器重置功能为何会失效？

本文共计1087个文字，预计阅读时间需要5分钟。

使用layui日期控件laydate时，页面开始时间小于结束时间的问题及处理方法描述：

在使用layui日期控件laydate时，若页面初始化后，选择的开头时间小于结束时间，可能是因为结束时间的默认值设置不当或日期范围选择逻辑错误。以下为问题描述及处理方法：

问题描述：

1.页面加载时，laydate初始化日期选择器。

2.默认设置的结束时间小于开始时间。

3.选择日期时，出现逻辑错误或显示异常。

处理方法：

1.检查laydate的配置参数，确保设置正确的开始和结束日期。

2.使用`min`和`max`属性限制日期范围，保证选择的开头时间不小于结束时间。

3.设置合适的默认日期值，确保初始化时显示合理的时间。

4.检查代码逻辑，确保用户选择日期时不会出现时间错误。

示例代码：

javascript// 初始化laydatelaydate.render({ elem: '#test1', min: '2016-01-01', // 最小日期 max: '2099-12-31', // 最大日期 value: '2021-12-01', // 默认显示日期 done: function(value, date, endDate){ // 这里可以添加逻辑处理，确保开始时间不小于结束时间 }});

通过以上方法，可以解决laydate初始化时开始时间小于结束时间的问题。

layui时间控件 laydate 重置失效

• 问题描述
• 页面代码
• 问题处理

问题描述

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(); }

问题解决，圆满。