easyui-datebox开始时间和结束时间限制

 1                     <tr>
 2                         <th class="tb-th">开始时间</th>
 3                         <td class="tb-td">
 4                             <input id="startdate"  name="startdateX" type="text" class="easyui-datebox easyui-validatebox" autocomplete="off" style=" 100%" value="${data.startdate?string('yyyy-MM-dd')}" data-options="prompt:'请选择开始时间' ,onSelect:selectStartDate">
 5                         </td>
 6                         <th class="tb-th">结束时间</th>
 7                         <td class="tb-td">
 8                              <input id="enddate"  name="enddateX" type="text" class="easyui-datebox easyui-validatebox" autocomplete="off" style=" 100%" value="${data.enddate?string('yyyy-MM-dd')}"data-options="prompt:'请选择结束时间' ,onSelect:selectEndDate">
 9                         </td>
10                     </tr>

js如下:

 1         //当选择开始时间时限定结束时间的范围
 2         function selectStartDate(startDate) {
 3             //返回calendar会清空enddate内容,需要保存下
 4             var tempEndDate = $('#enddate').datebox('getValue')
 5             $('#enddate').datebox().datebox('calendar').calendar({
 6                 validator: function (endDate) {
 7                     return endDate >= startDate;//限定时间选择范围
 8                 }
 9             });
10             $('#enddate').datebox('setValue', tempEndDate);//将enddate写回去
11         }
12         
13         //当选择结束时间时限定开始时间的范围
14         function selectEndDate(endDate) {
15             var tempStartDate = $('#startdate').datebox('getValue');
16             $('#startdate').datebox().datebox('calendar').calendar({
17                 validator: function (startDate) {
18                     return startDate <= endDate ;
19                 }
20             });
21             $('#startdate').datebox('setValue', tempStartDate);
22         }
原文地址:https://www.cnblogs.com/ywy8/p/13589666.html