為jQuery UI 中的DatePicker 控制項改造一個Clear按鈕

對於時間緊、任務重的遇到同個問題的程式員兄弟，請直接看代碼，跳過下面的絮叨文字。

最近都快成了一個JavaScript前景程式員了。。。原本我想只關注後台來著……沒辦法，工作需要啊～

今天一個同事突然跑過來，問我jQuery UI 裡的DatePicker能不能增加一個Clear按鈕，來個一鍵清除，我想強大的DatePicker肯定已經考慮到了這個需求，或許就是一個簡單屬性設定的事兒，結果，讓我失望了，DatePicker並沒有提供Clear功能，Google了一頓，結論是，或許曾經有，但從某個時間開始，基於某種原因被去掉了，並且再也沒有回來過。網上有些人給了一些重度hack的做法，深入到控制項的產生HTML的函數之中增加了一個Clear按鈕。這對於我輩JavaScript菜鳥，實在是不敢妄動，哪怕只是Copy & Paste. 其實DatePicker提供了2個按鈕， Today 和 Done，為何我們不從這個Done按鈕入手，讓它洗心革面，改造成一個Clear按鈕，同時又盡量只從控制項的外圍打補丁呢？經過對DatePicker產生的HTML的分析，發現似乎並不能難。只需要用以下代碼解決之。

 1 $(document).ready(function ()
 2 {
 3     //用來存放當前正在操作的日期文字框的引用。
 4     var datepicker_CurrentInput;
 5 
 6     // 設定DatePicker 的預設設定
 7     $.datepicker.setDefaults({ showButtonPanel: true, closeText: 'Clear', beforeShow: function (input, inst) { datepicker_CurrentInput = input; } });
 8 
 9     // 綁定“Done”按鈕的click事件，觸發的時候，清空文字框的值
10     $(".ui-datepicker-close").live("click", function ()
11     {
12         datepicker_CurrentInput.value = "";
13     });
14 });