zoukankan      html  css  js  c++  java
  • jQuery中的DatePicker今天按钮不起作用

    转载:http://codego.net/63433/

    jquery-ui 日期选择器datepicker
    我想用 jQueryUI 的 DatePicker ,并显示“今天”按钮, 但它不工作,它也不会在演示工作: 我想补今天的输入时,按下此按钮。 是否有可能得到它的工作?
    ------------------------------------------------------------------------------------------------------------------------- 
    1. 他们的代码是不是真的坏了。它只是没有做什么,大多数人会想到它做的。这是今天的日期,进入输入框。它所做的,就是亮点,看看在日历上今天的日期。如果他们离开,再过一个月或一年,日历弹出回到今天的视图 CodeGo.net,而无需取消已选定的日期。 为了使它更加直观,你需要更新插件代码,以满足您的需求。知道如何去。 你需要得到的jQuery UI的JavaScript的版本。我期待在1.7.2版本和“_gotoToday”函数上线6760。只需添加一个调用到该_gotoToday是激发了上线6831的_selectDate()函数。 :)快乐编码。 


    2. 我不喜欢修改它消除能力的CDN jQuery的源代码的解决方案。相反,你可以通过在你的页面的范围的JavaScript文件的代码(基于@meesterjeeves接听)重新分配_gotoToday函数:

    $.datepicker._gotoToday = function(id) {
     var target = $(id);
     var inst = this._getInst(target[0]);
     if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
       inst.selectedDay = inst.currentDay;
       inst.drawMonth = inst.selectedMonth = inst.currentMonth;
       inst.drawYear = inst.selectedYear = inst.currentYear;
     }
     else {
       var date = new Date();
       inst.selectedDay = date.getDate();
       inst.drawMonth = inst.selectedMonth = date.getMonth();
       inst.drawYear = inst.selectedYear = date.getFullYear();
       // the below two lines are new
       this._setDateDatepicker(target, date);
       this._selectDate(id, this._getDateDatepicker(target));
     }
     this._notifyChange(inst);
     this._adjustDate(target);
    }
    

    上面的代码基本上是从1.10.1版本的jQuery UI的DatePicker,除了上面标有两行。整个喃喃巨无霸与gotoCurrent因为该选项是没有意义的与我们的“今天”,其实是可以去掉。 


    3. 就在下面的两行代码添加到_gotoToday函数...

    /* Action for current link. */
    _gotoToday: function(id) {
     var target = $(id);
     var inst = this._getInst(target[0]);
     if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
      inst.selectedDay = inst.currentDay;
     inst.drawMonth = inst.selectedMonth = inst.currentMonth;
     inst.drawYear = inst.selectedYear = inst.currentYear;
     }
     else {
      var date = new Date();
      inst.selectedDay = date.getDate();
      inst.drawMonth = inst.selectedMonth = date.getMonth();
      inst.drawYear = inst.selectedYear = date.getFullYear();
     }
     this._notifyChange(inst);
     this._adjustDate(target);
     /* ### CUSTOMIZATION: Actually select the current date, don't just show it ### */
     this._setDateDatepicker(target, new Date());
     this._selectDate(id, this._getDateDatepicker(target));
    },
    


    4. 虽然我知道这已经被接受,这是我扩展的解决方案基于萨米锌的想法。这个jQuery 1.6.3和jQuery UI 1.8.16,并且工作在Firefox 6。

    $('.ui-datepicker-current').live('click', function() {
     // extract the unique ID assigned to the text input the datepicker is for
     // from the onclick attribute of the button
     var associatedInputSelector = $(this).attr('onclick').replace(/^.*'(#[^']+)'.*/gi, '$1');
     // set the date for that input to today's date
     var $associatedInput = $(associatedInputSelector).datepicker("setDate", new Date());
     // (optional) close the datepicker once done
     $associatedInput.datepicker("hide");
    });
    

    你不妨也blur()$associatedInput并在接下来的输入/在你的页面中选择,但是这不是容易做到笼统,或者是 作为一个例子,我做了这一个页面我工作表的布局上(不要开始,我知道这是不好的做法!):

    $associatedInput.closest('tr').next('tr').find('input,select').first().focus();
    


    5. 我认为处理这一点的最好办法是重写库本身的外侧。这解决的问题

    var old_goToToday = $.datepicker._gotoToday
    $.datepicker._gotoToday = function(id) {
     old_goToToday.call(this,id)
     this._selectDate(id)
    }
    

    简单,不要求你砍了任何事件或改变任何基础函数 


    6. 我不喜欢加入额外的代码jQuery的源代码的想法。我不希望覆盖_gotoToday方法,通过在底部复制粘贴其在javascript代码并添加额外的线路。 所以,我调整了这段代码:

    (function(){
     var original_gotoToday = $.datepicker._gotoToday;
     $.datepicker._gotoToday = function(id) {
      var target = $(id),
       inst = this._getInst(target[0]);
      original_gotoToday.call(this, id);
      this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));
     }
    })();
    


    7. 你可以试试下面的代码,以及填补当前日期输入框上点击今天按钮。只要把下面的代码中_gotoToday函数(在函数的末尾)中jquery.ui.datepicker.js

    this._selectDate(id, this._formatDate(inst,
    inst.selectedDay, inst.drawMonth, inst.drawYear));
    

    请注意,jQuery的日期选择器的,我1.8.5版本。

     
    8. jQuery UI的DatePicker的今天链接$('button.ui-datepicker-current').live('click', function() { $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur(); }); 


    9. 说什么“今天”按钮,标题可以通过改变

    .datepicker('option', 'currentText', 'New Title')
    

    唯一改变显示的月份为电流。这种行为也可以被配置

    .datepicker('option', 'gotoCurrent', true);
    

    之后,按下按钮,将显示的月份更改为所选日期的之一。 这似乎提交一个日期与这个按钮是不可能设计。 


    10. 我添加了一个选项,将日期选择器用于这一目的:selectCurrent。 做你只需要添加下面的js文件: 1)向函数的DatePicker的结束(),添加:

    selectCurrent: false // True to select the date automatically when the current button is clicked
    

    2)在_gotoToday函数的末尾,添加:

    if (this._get(inst, 'selectCurrent'))
     this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));
    


    11. 在日期选择器被重构为至少10多个新版本将解决这个问题。 


    12. 你也可以尝试把它添加到你的脚本:

    $('.ui-datepicker-current').live('click', function() {
      $(".datepicker").datepicker("setDate", date);
    });
    

    (使用。生活函数,而不是。点击) 


    13. 我刚摆脱它。 在CSS文件,这就是你的页面的一部分:

    .ui-datepicker-current {
     visibility:hidden
    }
    


    14. 这是曾在datepicker的beforeShow回调函数,而不是活()方法是一个hacker。

      ,beforeShow: function(input, datepicker) {
       setTimeout(function() {
        datepicker.dpDiv.find('.ui-datepicker-current')
        .text('Select Today')
        .click(function() {
          $(input)
           .datepicker('setDate', new Date())
           .datepicker('hide');
        });
       }, 1);
       return {};
      }
  • 相关阅读:
    DevExpress 数据与展示的不同
    WPF 自定义属性
    ruby中的retry和redo
    linux mint 18.1 安装nvidia显卡驱动
    gradle << 操作符作废
    emacs不能使用中文输入法
    linux mint 崩溃
    mint安装相关数据库lib
    字体安装文泉驿正黑
    Emacs使用projectile-rails 插件注意事项
  • 原文地址:https://www.cnblogs.com/quxiajun/p/6494698.html
Copyright © 2011-2022 走看看