easyui datebox添加清空按钮

easyui中使用datebox遇到过一点问题，如下

 

easyui中datebox样式默认如下:

这个datebox一旦选中一个日期之后，没有办法清除，对datebox扩展如下：

 var clearDateBox = "startTime,endTime".split(",");
 $(function(){
     //日期框增加清空按钮 
     var buttons = $.extend([], $.fn.datebox.defaults.buttons);
     buttons.splice(1, 0, {
         text: '清空',
         handler: function(target){
              for(var i = 0; i <clearDateBox.length;i++){
              if(target.id == clearDateBox[i]){
                  $('#'+clearDateBox[i]).datebox('clear');
              }
             }
         }
     });
     for(var i = 0; i <clearDateBox.length;i++){
         $('#'+clearDateBox[i]).datebox({
             buttons: buttons
         });
     }
     //对datebox赋值一定要放在初始化之后 
     $("#startTime").datebox("setValue","2017-02-02");
 })

 

原理就是扩展easyui的datebox.defaults.buttons 调用datebox的clear方法

clearDateBox 变量存放的是页面上所有需要扩展的datebox的id

这里有一个需要注意的地方，就是如果自己对datebox扩展之后，同时在页面加载时要对datebox进行初始化赋值，赋值的操作一定要放到自己扩展的方法之后，否则赋值无法生效。
扩展之后的样式如下：

清空按钮可以清空已选择的datebox值。