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


Related articles: