easyui datebox的事件、按钮、属性的使用

本文介绍了如何使用EasyUI的Datebox组件进行日期限制，如设置只能选择18年前的日期、禁止选择当天之后的日期，以及解决onchange事件重复触发的问题。同时，文章还探讨了如何禁止用户手动输入日期，并展示了添加清除按钮的方法，以增强Datebox的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.限制日期选择
前端：限制只能选择18年之前的日期
业务：买保险-----需要满18岁----限制只能选18周岁之前
怎么限制？
easyui中用固定写法：
1.限制只能选18周岁之前的日期

$('#BirthDay').datebox().datebox('calendar').calendar({
    validator: function (date) {
        //var now = new Date();
        //var d1 = new Date(now.getFullYear(), now.getMonth(), now.getDate());
        var mouth = now.getMonth()+1;
        var day = now.getDate();
        var year = now.getFullYear() - 18;
        var d2 = new Date(year, mouth, day);
        return d2>date;
        //return d1 >= date&&d2>date;
    }
});

2.限制不能选择当天之后的日期

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

3.datebox控件选择时触发事件

$('#BirthDay').datebox({
    onHidePanel : function () {
        //点击日期控件的“今天”触发查询事件
        var BirthDay = $("#BirthDay").combobox("getText");
        if (!satisfy(BirthDay)) {
            msgAlert("未满18周岁");
            return;
        };
    },
    onSelect: function () {
        //点击日期控件触发查询事件
        var BirthDay = $("#BirthDay").combobox("getValue");
        if (satisfy(BirthDay)) {
            msgAlert("出生日期需要大于18周岁");
            return;
        };
    }
});

这时候，的确是可以完成了选择时触发事件，但是，当我们点击今天的时候，会发现事件会调用了两次。
那这时候，我们就可以利用onchange来解决这些问题

$('#BirthDay').datebox({
    onChange: function () {
        //点击日期控件触发查询事件
        var BirthDay = $("#BirthDay").combobox("getText");
        if (!satisfy(BirthDay)) {
            msgAlert("未满18周岁");
            return;
        };
    },
});

4.如何禁止手动输入
在这里插入图片描述
5.添加清除按钮
在项目中，使用了easyui的datebox标签后，发现没有清除按钮，因此我们需要添加一个清除按钮

var buttons = $.extend([], $.fn.datebox.defaults.buttons);
buttons.splice(1, 0, {
    text: '清除',
    handler: function (target) {
    	$(target).datebox("setValue", "");
    }
});
$('.easyui-datebox').datebox({
    buttons: buttons
});