Easyui-datebox日期控件增加清空按钮

Easyui-datebox日期控件增加清空按钮

在使用Easyui-datebox日历控件的时候，我们会发现没有清空按钮，如果直接将日志文本框中的文字删除，使用

var endDate = $('#endDate').datebox('getValue');

会发现endDate还是之前的日期，IE9以后文本框自带的小×（文本框尾部）点击也是同样的效果。在不修改Easyui源文件的情况下我们就需要添加如下脚本，给日期控件添加清空按钮。

代码1

<input id="endDate" name="endDate" class="text easyui-datebox disabled lg-input" value=""data-options="editable:false" style="width: 99px"/>

首先我们需要添加：data-options="editable:false"。

代码2

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

切记代码2必须添加在Easyui控件渲染之后。