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



你可能感兴趣的:(Datepicker)