layui 关于layDate设置时间限制问题

前面是尝试结果，有兴趣的可以康康，赶时间的可以直接翻到底下 ----->直达车
在这里插入图片描述
因为只有一个页面，没什么标准，所以自己就使用了layui的时间控件，并且作为独立组件。

第一次尝试 - 使用 `min`

一开始只想让结束时间有个时间限制，就是结束时间在开始时间后面。直接在结束时间的控件上添加了 min 属性，可想而知：

在结束时间控件上添加了 min 属性，与开始时间没有关联；
每次打开结束时间控件，可选择的值都是 min 之后的值；

<div class="timeOrange-input">            <input type="text" class="ind2 cloneStart" id="startTime" placeholder="开始时间" autocomplete="off" readonly><span> - </span><input type="text" class="ind2 cloneEnd" id="endTime" placeholder="结束时间" autocomplete="off" readonly>
</div>
<script>
var params = {   //请求参数date: "",devId: "",startTime: "",endTime: ""
}; 
laydate.render({elem: '#startTime', //指定元素type: 'time',format:'HH:mm',done: function(value,date){params.startTime = value;   }
});
laydate.render({elem: '#startTime', //指定元素type: 'time',format:'HH:mm',min: "00:00:00"done: function(value,date){params.startTime = value;   }
});
</script>

第二次尝试 - 使用 `ready`

Layui 中有个 ready 回调函数，它是控件初始打开的回调。就想可不可以一打开这个控件时间限制就已经被加进去了。

<script>
laydate.render({elem:'#endTime',type: "time",format:'HH:mm',ready: function(date){console.log(this,date)//this.dateTime记录了当前的年、月、日，//因为原来的min是从 1900年1月1日 开始的，如果不设置当前的日期，//控制的hours/minutes/seconds就是1990年那天的最小值this.min = {year: this.dateTime.year,  month: this.dateTime.month,date: this.dateTime.date,hours: parseInt(params.startTime.split(":")[0]),minutes: parseInt(params.startTime.split(":")[1]),seconds: 0}done: function(value, date){params.endTime = value; }
});
</script>

此时可以发现，第一次点击时不产生效果，但是第二次生效了！
在这里插入图片描述
这是因为 ready 是控件在打开时触发，也就是打开控件后给控件设置操作，而不是在控件打开之前触发。当第一次打开控件时，min 还没有被设置，我们在 ready 中设置了控件的 min 值，第二次打开控件，此时min已经被设置了。

第三次尝试 - 在开始时间控件中设置结束时间的 `min`值

layDate 中的 done 是控件选择完毕后的回调，点击日期、清空、现在、确定均会触发该函数。
参考吕一

<script>
laydate.render({elem: '#startTime', //指定元素type: 'time',format:'HH:mm',max: '23:59:59',done: function(value, date){params.startTime = value; //不清楚对象里面的属性，可以通过查看对属性值进行改写console.log(endT.config.min); endT.config.min = {year: date.year,month: date.month -1,date: date.date,hours: date.hours,minutes: date.minutes,seconds: 0}}
});var endT = laydate.render({elem:'#endTime',type: "time",format:'HH:mm',done: function(value, date){params.endTime = value; }
});
</script>

在这里插入图片描述
满足我想要的效果，但是选择完结束时间后，再去选择开始时间，因为开始时间没有做限制，重新选择时可以选择到在结束时间后的时间，所以给开始时间和结束时间都做了限制。

结束 - 参考月生三州

开始时间和结束时间相互限制。

<script>
var startT = laydate.render({elem: '#startTime', //指定元素type: 'time',format:'HH:mm',max: '23:59:59',done: function(value, date){params.startTime = value; endT.config.min = {  //给结束时间设置最小值year: date.year,month: date.month -1,date: date.date,hours: date.hours,minutes: date.minutes,seconds: 0}}
});var endT = laydate.render({elem:'#endTime',type: "time",format:'HH:mm',done: function(value, date){params.endTime = value; startT.config.max = {  //给开始时间设置最大值，让开始时间<结束时间year: date.year,month: date.month -1,  //设置月份时需要减一date: date.date,hours: date.hours,minutes: date.minutes,seconds: 0}}
});
</script>