easyui datebox组件，系统当前日期以后的日期、禁止选择，后选日期不能在前选日期之前

EasyUI DateBox 自定义验证

最新推荐文章于 2024-05-30 09:33:02 发布

原创最新推荐文章于 2024-05-30 09:33:02 发布 · 6.4k 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍如何使用 EasyUI 的 DateBox 组件并自定义验证规则，包括限制选择未来日期及确保结束日期不早于开始日期的方法。

项目中用到easyui-datebox组件，需要一些默认的设置规则，mark以下，便于以后自己查找，示例如下：
时间范围：
<input id="searchBegDate" name="searchBegDate" type="text" class="easyui-datebox" style="width:100px;" editable="false"/>
  <span style="color:#fff !important;">到</span>
<input id="searchEndDate" name="searchEndDate" type="text" class="easyui-datebox" style="width:100px;" editable="false"/>

1：系统当前日期以后的日期、禁止选择

$('#searchBegDate').datebox().datebox('calendar').calendar({
    validator : function(date){
        var now = new Date();
        var d1 = new Date(now.getFullYear(),now.getMonth(),now.getDate());
        return d1 >= date;
    }
});
$('#searchEndDate').datebox().datebox('calendar').calendar({
    validator : function(date){
        var now = new Date();
        var d1 = new Date(now.getFullYear(),now.getMonth(),now.getDate());
        return d1 >= date;
    }
});

2：后选日期不能在前选日期之前，也不能在当前系统日期之后

$("#searchBegDate").datebox({
    onSelect : function(beginDate){
        $('#searchEndDate').datebox().datebox('calendar').calendar({
            validator: function(date){
                var now = new Date();
                var d1 = new Date(now.getFullYear(),now.getMonth(),now.getDate());
                return beginDate <= date && d1 >= date;
            }
        });
    }
});