jQuery Datepicker中的Today按钮不能工作

I'm using jQueryUI Datepicker and show "Today" button. But it doesn't work. It also doesn't work in demo: http://www.jqueryui.com/demos/datepicker/#buttonbar

我正在使用jQueryUI Datepicker并显示“Today”按钮。但它不工作。它在demo中也不工作:http://www.jqueryui.com/demos/datepicker/#buttonbar

I'w want to fill input with today when press this button.

今天按这个按钮时，我要填写输入。

Is it possible to get it working?

有可能让它工作吗?

18 个解决方案

#1

Their code is not really broken. It just doesn't do what most people would expect it to do. Which is to enter today's date into the input box. What it does do, is highlight for the user to see today's date on the calendar. If they were off in another month or another year, the calendar pops back to today's view without deselecting the date the user already selected.

他们的代码并没有真正被破坏。它并没有达到大多数人的期望。也就是将今天的日期输入到输入框中。它所做的就是让用户在日历上看到今天的日期。如果它们在另一个月或另一个年之后关闭，日历就会弹出到今天的视图中，而不会取消用户已经选择的日期。

To make it more intuitive, you'll need to update the plugin code to suit your needs. Let me know how it goes.

为了使它更直观，您需要更新插件代码以满足您的需要。告诉我怎么回事。

You'll need to get the uncompressed version of the jquery-ui javascript. I'm looking at version 1.7.2 and the "_gotoToday" function is on line 6760. Just add a call into that _gotoToday that fires off the _selectDate() function on line 6831. :) Happy Coding.

您需要获取jquery-ui javascript的未压缩版本。我正在查看1.7.2版本，“_gotoToday”函数在第6760行。只需在_gotoToday中添加一个调用，该调用在第6831行触发_selectDate()函数。:)快乐编码。

#2

I don't like the solution of modifying the jQuery source code because it removes the ability to use a CDN. Instead, you can reassign the _gotoToday function by including this code based on @meesterjeeves answer somewhere in your page's JavaScript scope file:

我不喜欢修改jQuery源代码的解决方案，因为它删除了使用CDN的能力。相反，您可以重新分配_gotoToday函数，通过在页面的JavaScript范围文件中的某个地方包含基于@meesterjeeves回答的代码:

$.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);
}

The above code is essentially the same as the jQuery UI Datepicker from version 1.10.1 except for the two lines marked above. The whole mumble-jumbo with gotoCurrent can actually be removed since that option does not make sense with our new meaning of "today".

上面的代码基本上与1.10.1版本中的jQuery UI Datepicker相同，除了上面标记的两行。整个带有gotoCurrent的mumbjumbo实际上可以被删除，因为这个选项对我们的“today”的新含义没有意义。

#3

I think the best way to handle this is to override the _goToToday method outside of the library itself. This solved the issue for me:

我认为最好的处理方法是在库本身之外重写_goToToday方法。这就解决了我的问题:

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

Simple and doesn't require you to hack up any events or change any underlying functionality

简单，不需要你破坏任何事件或改变任何基础功能

#4

Just add the following two lines of code to the _gotoToday function...

只需向_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));
},

#5

Though I know this has already been accepted, here is my expanded solution based on Samy Zine's idea. This was using jQuery 1.6.3 and jQuery UI 1.8.16, and worked for me in Firefox 6.

虽然我知道这已经被接受，以下是我基于Samy Zine的扩展解决方案。这是使用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");
});

You may wish to also blur() the $associatedInput and focus on the next input/select in your page, but that is not trivial to do generically, or is implementation-specific.

您可能还希望模糊$associatedInput并将注意力集中在页面中的下一个输入/选择上，但是这样做并不简单，或者是特定于实现的。

As an example, I did this on a page I was working on that used tables for layout (don't get me started, I know that is bad practice!):

举个例子，我在一个用过的表格布局的页面上做了这个(不要让我开始，我知道这是不好的做法!)

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

#6

I don't like the idea of adding extra code to jQuery source code. And I don't want to override _gotoToday method by copy-pasting its implementation somewhere in the javascript code and adding extra lines at the bottom.

我不喜欢在jQuery源代码中添加额外代码的想法。而且我不想在javascript代码中粘贴它的实现，并在底部添加额外的行，从而重写_gotoToday方法。

So, I've tweaked it using this code:

所以，我用这个代码对它进行了调整:

(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

Documentation says what "today" button which title could be altered via

文件上写着“今天”按钮，标题可以通过它来修改

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

only changes displayed month to current. This behaviour also could be configured

只显示当前月的变化。这种行为也可以配置。

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

After that pressing the button will change displayed month to selected date's one.

按下按钮后，显示的月份将改为选定日期的月份。

It seems submitting a date with this button is impossible by design.

按照设计，用这个按钮提交日期似乎是不可能的。

#8

I have added an option to the datepicker for that purpose: selectCurrent.

为此，我向datepicker添加了一个选项:selectCurrent。

To do the same, you just have to add the following to the uncompressed js file:

要做到这一点，只需在未压缩的js文件中添加以下内容:

1) Toward the end of function Datepicker(), add:

1)函数Datepicker()结束时，添加:

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

2) At the end of the _gotoToday function, add:

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

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

#9

I just got rid of it.

我刚把它处理掉了。

In some CSS file that's part of your page:

在一些CSS文件中，这是你页面的一部分:

.ui-datepicker-current {
    visibility:hidden
}

#10

You can try the below code as well to fill current date in input box on click of Today button. Just put the below code in the _gotoToday function (at the end of the function) in jquery.ui.datepicker.js.

您也可以尝试下面的代码填写当前日期在输入框点击今天按钮。将下面的代码放在jquery.ui.datepicker.js的_gotoToday函数中(函数的末尾)。

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

Please note that I am using version 1.8.5 of jquery datepicker.

请注意，我使用的是jquery datepicker 1.8.5版本。

#11

jQuery UI Datepicker Today Link

jQuery UI Datepicker今日链接

$('button.ui-datepicker-current').live('click', function() { $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur(); });

$(' button.ui-datepicker-current ')。生活(“点击”,函数(){ .datepicker._curInst.input美元。datepicker(“设置当前日期”,新的日期()).datepicker(隐藏的).blur();});

#12

$.datepicker._gotoToday = function(id) {
  var inst = this._getInst($(id)[0]);

  var date = new Date();
  this._selectDay(id, date.getMonth(), date.getFullYear(), inst.dpDiv.find('td.ui-datepicker-today'));
}

$.datepicker.setDefaults({
  changeMonth: true,
  maxDate: 'today',
  numberOfMonths: 1,
  showButtonPanel: true
});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<input type="text" id="id">

#13

The datepicker is being refactored to be at least 10 times more awesome. The new version will address this issue.

datepicker正在被重构至少10倍的awesome。新版本将解决这个问题。

http://wiki.jqueryui.com/w/page/12137778/Datepicker

http://wiki.jqueryui.com/w/page/12137778/Datepicker

#14

You can also try to add this to your script :

您还可以尝试将其添加到您的脚本中:

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

( use .live function and not .click)

(使用.live功能而不是.click)

#15

This is a hack that worked for me that uses the Datepicker's beforeShow callback function as opposed to the live() approach.

这是一个对我有用的技巧，它使用了Datepicker的前一个回调函数，而不是live()方法。

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

#16

This is a simple hack

这是一个简单的hack。

$(function() {
var _gotoToday = $.datepicker._gotoToday;
$.datepicker._gotoToday = function(a){
var target = $(a);
var inst = this._getInst(target[0]);
_gotoToday.call(this, a);
$.datepicker._selectDate(a, $.datepicker._formatDate(inst,inst.selectedDay, inst.selectedMonth, inst.selectedYear));
target.blur();
}

$( “#datepicker” ).datepicker({
showButtonPanel: true
});

});

#17

You should use option: todayBtn:“linked”. (instead of todayBtn:true).

您应该使用选项:todayBtn:“链接”。(而不是todayBtn:真实)。

todayBtn Boolean, “linked”. Default: false

todayBtn布尔,“联系”。默认值:假

If true or “linked”, displays a “Today” button at the bottom of the datepicker to select the current date. If true, the “Today” button will only move the current date into view; if “linked”, the current date will also be selected.

如果是true或“linked”，则在datepicker的底部显示一个“Today”按钮以选择当前日期。如果是，“今天”按钮只会将当前日期移动到视图中;如果“链接”，也将选择当前日期。

For more details look at the following link: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#todaybtn

有关更多细节，请查看以下链接:http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#todaybtn

#18

(Please note, this isn't a question. I am trying to be helpful by providing my solution since the other solutions did not work for me.)

请注意，这不是问题。我试图通过提供我的解决方案来帮助我，因为其他的解决方案对我不起作用。

I couldn't get the datepicker to stay hidden with any of the other answers. The calendar would close and then re-open. The below code worked for me to change the Today button to set the date to the current day and close the calendar.

我无法让datepicker隐藏其他答案。日历会关闭，然后重新打开。下面的代码可以帮助我更改Today按钮，将日期设置为当前日期并关闭日历。

jQuery UI - v1.11.4 jQuery JavaScript Library v1.11.1 IE 11.0.28

jQuery UI - v1.11.4 jQuery JavaScript库v1.11.1 IE 11.0.28

I've included my defaults for completeness.

我已经包含了我的默认完整性。

    $.datepicker._gotoToday = function(id) {
      var inst = this._getInst($(id)[0]);

      var date = new Date();
      this._selectDay(id, date.getMonth(), date.getFullYear(), inst.dpDiv.find('td.ui-datepicker-today'));
    }

    $.datepicker.setDefaults({
      changeMonth: true,
      maxDate: 'today',
      numberOfMonths: 1,
      showButtonPanel: true
    });