jquery datepicker clear date

对于日期控件datepicker，clear date应该是一个基本的功能需求，本来就应该有的。无语Jquery为何要去掉这个功能，害我在网上搜了好久，而且Baidu都出不来东西，只有到Google才能找到解决方案。在中国想查点资料都要翻墙，这里要批评一些政府了。某些人自己活在美国，却要让我们活在朝鲜。

一、.datepicker 已有的东西： Today 按钮和 Done 按钮。

大家的解决方案都是Hack Done 按钮来做 Clear 事件。

二、实现方法

1.重新绑定Close时间发

$(function(){
	$("#test_date").datepicker({
			showOn: 'button',
			buttonImageOnly: true,
			buttonImage: 'Content/Css/jquery.ui/images/calendar.gif',
			changeYear: true,
			changeMonth: true,
			numberOfMonths: 1
	});	

      //用来存放当前正在操纵的日期文本框的引用。
      var datepicker_CurrentInput;
  
      // 设置DatePicker 的默认设置
      $.datepicker.setDefaults({ 
			closeText: 'Clear',
			showButtonPanel: true,
			beforeShow: function(input, inst) { 
				datepicker_CurrentInput = input;
			}
	  });
  
      // 绑定“Done”按钮的click事务，触发的时辰，清空文本框的值
     $(".ui-datepicker-close").live("click",function()
     {
         datepicker_CurrentInput.value = "";
     });
});

2.替换datepicker自带的_generateHTML 方法

$(function(){
	$("#test_date").datepicker({
			showOn: 'button',
			buttonImageOnly: true,
			buttonImage: 'Content/Css/jquery.ui/images/calendar.gif',
			changeYear: true,
			changeMonth: true,
			numberOfMonths: 1,
			closeText: 'Clear',
			showButtonPanel: true,
			showClearButton : true
	});

	 //http://bugs.jqueryui.com/ticket/3999
	 $.datepicker._generateHTML_Old = $.datepicker._generateHTML; 
	 $.datepicker._generateHTML = function(inst) {
		res = this._generateHTML_Old(inst); 
		res = res.replace("_hideDatepicker()","_clearDate('#"+inst.id+"')"); 
		return res;
	 }	
});

三、方法用于实践。

个人觉得第一种方法比较丑陋，通过设置变量来处理感觉不好。

所以采取了第二种方法来显示Clear按钮的功能，但是天不遂人意，竟然有个Javascript error。

于是只有执行第三种方案，直接在datepicker定义文件修改

_generateHTML

修改内容如下，在 controls 变量替换为Clear事件。

		var controls = (!inst.inline ? '<button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all" οnclick="DP_jQuery.datepicker._hideDatepicker();">' + this._get(inst, 'closeText') + '</button>' : '');
		
        //---------------change begin---------------------------
        /*
		Acme changed:
        2012-04-10
        hack clear function on close button
        */
		//closeText: 'Clear',
		var clearText = this._get(inst, 'closeText');
		if (clearText == "Clear") {
		    controls = controls.replace("_hideDatepicker()", "_clearDate('#" + inst.id + "')");  
		}
		//---------------change end---------------------------

修改后测试通过。

四、总结

最后实现这个功能还是修改了datepicker文件，是下下策了。不过完成了功能也好。

实际上也可以直接扩展datepicker 了。