Implementation code of easyui datebox time limit datebox start time limit end time datebox end date larger than start date
- 2021-07-10 18:41:22
- OfStack
1. Html code
Note that you need to add data-options= "editable: false". You cannot modify the date directly
<tr>
<td width="15%" class="label"> Contract start date :</td>
<td width="35%">
<input value="${loan.contractBegtime}" class="f1 easyui-datebox" id="contractBegtime" name="contractBegtime" data-options="required:true,editable:false"/>
<font class="star-red">*</font>
</td>
<td width="15%" class="label"> Contract deadline :</td>
<td width="35%">
<input value="${loan.contractEndtime}" class="f1 easyui-datebox" id="contractEndtime" name="contractEndtime" data-options="required:true,editable:false"/>
<font class="star-red">*</font>
</td>
</tr>
2. js code restrictions
$("#contractBegtime").datebox({
onSelect : function(beginDate){
$('#contractEndtime').datebox().datebox('calendar').calendar({
validator: function(date){
return beginDate<date;//<=
}
});
}
});
After you increase the limit, after you select the Start Date, the As Date must be larger than the Start Date, or the As Date can be equal to the Start Date if you want,
Just use < =.
Remind again:
data-options="editable:false"
Otherwise, the due date can be modified to a time less than the start date
If you have other requirements, you can check the official documents:
http://www.jeasyui.net/demo/345.html