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 {};
  }

posted @ 2017-03-03 10:57 quxiajun 阅读(3734) 评论(0) 编辑收藏举报

刷新页面返回顶部

quxiajun

jQuery中的DatePicker今天按钮不起作用

公告