讓 jQuery UI 的 DatePicker 多個 clear 按鈕

Keith Wood 寫了不錯的日曆挑選元件，同時也被 jQuery UI 收錄為官方版的挑日期方案。所以我們只要在 datepicker 頁面，就可以找到。然而，如果你細心的去比較 Keith Wood 的個人網站，會發現該作者目前所發表的日曆挑選元件，似乎在功能上，比 jQuery UI 所發佈的還要多。舉例來說，下面的日曆元件是來自於 Keith Wood 目前的版本 4.0.6

有沒有發現，他有一個 Clear 的鏈結，點下去，會將目前的日期輸入方塊上的資料清掉。很重要嗎？如果你的日期輸入方塊，有設定為 readOnly = true 時，這種需求的機會應該就會變高了。那 jQuery UI 的有提供嗎？

目前 jQuery UI 的版本是：1.8.16，很不巧的，沒有，他並沒有 clear 的功能。但如果你真心喜歡一個人的話，理應可以包容對方不足的地方。但前提是，要先努力過，努力甚麼呢？先給他去整形一下吧...


雖然 jQuery UI 目前的版本並沒有提供，但熱心的工程師，總是會想出些「成人之美」的方案。我在 http://bugs.jqueryui.com/ticket/3999 看到了很多人的抱怨，但也發現了一個有建設性的解法，雖然要多寫幾行程式，但能抓到老鼠的都算是好貓啦！

<script type="text/javascript">
$(function(){
    $(".pickdate").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'yy/mm/dd',            
        showButtonPanel: true

    });

    // hack to add clear button
    // 增加清除按鈕 -Start (Ref. http://bugs.jqueryui.com/ticket/3999)
    //wrap up the redraw function with our new shiz
    var dpFunc = $.datepicker._generateHTML; //record the original
    $.datepicker._generateHTML = function (inst) {
        var thishtml = $(dpFunc.call($.datepicker, inst)); //call the original

        thishtml = $('<div />').append(thishtml); //add a wrapper div for jQuery context

        //locate the button panel and add our button - with a custom css class.
        $('.ui-datepicker-buttonpane', thishtml).append(
 $('<button class="\
  ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all\
  "\>Clear</button>'
 ).click(function () {
     inst.input.attr('value', '');
     inst.input.datepicker('hide');
 })
);

        thishtml = thishtml.children(); //remove the wrapper div

        return thishtml; //assume okay to return a jQuery
    };

    // 增加清除按鈕 -End

  
  
});
</script>

如此折騰一番後，就可以多生出一個 Clear 按鈕了。

測試程式 [下載]

參考：
01：http://bugs.jqueryui.com/ticket/3999
02：Keith Wood，http://keith-wood.name/index.html