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



  • 相关阅读:
    实验四 代码评审
    实验三、UML 建模工具的安装与使用
    结对编程 第二阶段
    结对编程第一阶段
    实验一 GIT代码版本管理
    实验五 单元测试
    实验四 代码评审
    实验三 UML 建模工具的安装与使用
    结对编程阶段二
    结对编程第一阶段
  • 原文地址:https://www.cnblogs.com/Ricky81317/p/2363324.html
Copyright © 2020-2023  润新知