layui.layuidate的实现需满足以下3点：
- 选择开始时间后，点击确定，开始时间显示
- 选择设置结束时间：（结束时间范围:
[选择的开始时间+30备注：最远可选择的是第30天，可以在30内进行其他日期的选择） - 如果修改开始时间，结束时间自动清空。
刚开始写的时候，我的问题主要是：再次修改开始日期的时候，那个结束的日期范围就没有更新。
解决方法是：切换选择开始日期后删除结束日期元素，再次添加新的元素。
$("#dateChangeEnd").remove();
$(".date-text").after(
'<input type="text" class="layui-input" style="width: 260px;margin-left: 10px;" lay-verify="required" id="dateChangeEnd" name="endTime">')
完整代码如下：
html:
<div class="qrcode-right-list qrcode-time">
<input type="text" class="layui-input" style="width: 260px;margin-right: 10px;" lay-verify="required" id="dateChangeStart" name="startTime" />
<span class="date-text">至:</span>
<input type="text" class="layui-input" style="width: 260px;margin-left: 10px;" lay-verify="required" id="dateChangeEnd" name="endTime" />
</div>
js:
// 开始日期结束日期
laydate.render({
elem: '#dateChangeStart',
type: 'datetime',
min: 0, //最小是当天的日期
format: 'yyyy-MM-dd HH:mm:ss',
trigger: 'click',
done: function (value, date, endDate) {
$("#dateChangeEnd").remove();
$(".date-text").after(
'<input type="text" class="layui-input" style="width: 260px;margin-left: 10px;" lay-verify="required" id="dateChangeEnd" name="endTime">')
console.log("初次选择是否会触发",value,getMinDate(value));
laydate.render({
elem: '#dateChangeEnd',
trigger: 'click',
type: 'datetime',
min:0,
max:getMinDate(value),
format: 'yyyy-MM-dd HH:mm:ss',
trigger: 'click',
done: function (value, date, endDate) {
var startDate = $("input[name='startTime']").val();
if (startDate == value) {
return layer.msg('开始结束日期不可设置相同');
} else {
return true
}
}
});
}
,change: function(value, date, endDate){
$("#dateChangeEnd").val('')
}
});
// 计算开始时间推迟后30天
function getMinDate(time){
console.log(3333,time)
var date1 = new Date(time);
var date2 = new Date(date1);
date2.setDate(date1.getDate() + 30);
var year = date2.getFullYear();
var month = date2.getMonth() + 1 <10 ? `0${date2.getMonth() + 1}` : date2.getMonth() + 1;
var data = date2.getDate() < 10 ? `0${date2.getDate()}` : date2.getDate();
var hour = date2.getHours() < 10 ? `0${date2.getHours()}` : date2.getHours();
var min = date2.getMinutes() <10 ? `0${date2.getMinutes()}` : date2.getMinutes();
var sec = date2.getSeconds() <10 ? `0${date2.getSeconds()}` : date2.getSeconds();
return year + "-" + month + "-" + data + " "+ hour + ":" + min + ":" + sec
}
})
效果展示：
如果大家有更好更多的解决方法，欢迎评论区留言😁
