easyui 日期控件清空值

短命女 2022-08-13 08:58 164阅读 0赞

最近用了Easyui的日期控件datebox，项目中要将选中值清空，于是就研究了一下。

1，调用方法清空

$('#yourId').combo('setText','');

2，更改js文件

从官网下载的源文件中，datebox控件界面只有‘Today’，‘Close’事件，我们可以把清空选项值的事件添加到js中去，这样，只要引用了datebox这个控件，界面上就会有清空选项。具体修改步骤如下：

首先在官网上下载jquery.easyui.min.js文件。

在js文件中找到Today Close事件定义的地方，并添加Clean事件的定义。

源文件说明：![SouthEast][]

将源文件12733--12742行文件替换为：

![SouthEast 1][]

代码：

}},currentText:"Today",cleanText:"Clean",closeText:"Close",okText:"Ok",buttons:[{text:function(_985){
    return $(_985).datebox("options").currentText;
    },handler:function(_986){
    $(_986).datebox("calendar").calendar({year:new Date().getFullYear(),month:new Date().getMonth()+1,current:new Date()});
    _975(_986);
    }},{text:function(_987){
    return $(_987).datebox("options").closeText;
    },handler:function(_988){
    $(this).closest("div.combo-panel").panel("close");
    }},{ text : function(_989) {
    
    return $(_989).datebox("options").cleanText;
    
    },handler : function(_990) {
    
    $(_990).combo('setValue', '').combo('setText', '');
    
    $(this).closest("div.combo-panel").panel("close");
    
    }}],formatter:function(date){

界面效果如下：

![SouthEast 2][]

3，中文js更改

上面我们把源js改好了，只不过界面显示的是英文，如果用了中文包的话，还需要更改easyui-lang-zh\_CN.js

在js文件中找到‘今天’ ‘关闭 ’事件定义的地方，并添加‘清空’

![SouthEast 3][]

代码：

$.fn.datebox.defaults.currentText = '今天';
    	$.fn.datebox.defaults.closeText = '关闭';
    	$.fn.datebox.defaults.cleanText = '清空';

修改事件：

![SouthEast 4][]  
    代码：

if ($.fn.datetimebox && $.fn.datebox){
    	$.extend($.fn.datetimebox.defaults,{
    		cleanText: $.fn.datebox.defaults.cleanText,
    		currentText: $.fn.datebox.defaults.currentText,
    		closeText: $.fn.datebox.defaults.closeText,
    		okText: $.fn.datebox.defaults.okText,
    		missingMessage: $.fn.datebox.defaults.missingMessage
    	});
    }

[SouthEast]: /images/20220810/e929b925a1dc408e86521d6390c1b15b.png
[SouthEast 1]: /images/20220810/27579178594c4ca38431ab9f2f7aba29.png
[SouthEast 2]: /images/20220810/7513cd93a14c4f5fa840cd5fc38d2a46.png
[SouthEast 3]: /images/20220810/e20299b27f7c4d38a0763364b1197359.png
[SouthEast 4]: /images/20220810/81ecb9e2fcf74e3e8b019b4f32de8767.png