easyui datebox 时间限制，datebox开始时间限制结束时间，datebox截止日期比起始日期大的实现代码

1. easyui datebox 时间限制

如果需要限制easyui datebox可选择的时间范围，可以使用min和max属性或者disabledDates和disabledDays属性达到目的。

• min和max属性：

<!-- 输入框前端代码 -->
<input id="DateBox" class="easyui-datebox" data-options="min:'2021-01-01', max:'2021-12-31'">

上述代码中，将DateBox input框的可选时间范围设置为2021年1月1日至2021年12月31日。

• disabledDates和disabledDays属性：

<!-- 输入框前端代码 -->
<input id="DateBox" class="easyui-datebox" data-options="disabledDates:['2021-12-24','2021-12-25','2022-01-01'], disabledDays:[6,0]">

上述代码中，将DateBox input框的可选时间范围设置为除了2021年12月24日、2021年12月25日、2022年1月1日以外的日期，并且不能选择周六、周日。

1. datebox开始时间限制结束时间、截止日期比起始日期大

如果需要限制两个datebox之间的时间关系，可以使用onSelect事件和canlendar对象的setDate方法实现。

• datebox开始时间限制结束时间：

<!-- 开始时间 -->
<input id="StartTimeBox" class="easyui-datebox" data-options="onSelect: function(date){$('#EndTimeBox').datebox('calendar').calendar('options').minDate = date;}">
<!-- 结束时间 -->
<input id="EndTimeBox" class="easyui-datebox">

上述代码中，在选择开始时间时，将结束时间的最小可选日期设置为选择的开始时间。

• datebox截止日期比起始日期大：

<!-- 开始时间 -->
<input id="StartDateBox" class="easyui-datebox" data-options="onSelect: function(date){$('#EndDateBox').datebox('calendar').calendar('options').minDate = date;}">
<!-- 结束时间 -->
<input id="EndDateBox" class="easyui-datebox" data-options="onSelect: function(date){$('#StartDateBox').datebox('calendar').calendar('options').maxDate = date;}">

上述代码中，在选择开始时间时，将结束时间的最小可选日期设置为选择的开始时间；在选择结束时间时，将开始时间的最大可选日期设置为选择的结束时间，这样就实现了限制截止日期比起始日期大的效果。