为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 });