jQuery Datepicker中的“今天”按钮不起作用

我正在使用jQueryUI Datepicker并显示“今天”按钮。但这是行不通的。在演示中也无法使用：http : //www.jqueryui.com/demos/datepicker/#buttonbar

我想在今天按下此按钮时填写输入。

是否有可能使其正常工作？

他们的代码并没有真正被破坏。它只是没有实现大多数人期望的那样。将今天的日期输入到输入框中。它的作用是突出显示供用户在日历上查看今天的日期。如果他们在另一个月或另一年休假，则日历会跳回到今天的视图，而不会取消选择用户已经选择的日期。

为了使其更加直观，您需要更新插件代码以适合您的需求。让我知道事情的后续。

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

我不喜欢修改jQuery源代码的解决方案，因为它消除了使用CDN的能力。相反，您可以通过基于页面的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实际上，可以删除整个“笨拙的巨型”，因为该选项对于我们的“今天”的新含义没有意义。

我认为处理此问题的最佳方法是在库本身之外覆盖_goToToday方法。这为我解决了这个问题：

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

很简单，不需要您修改任何事件或更改任何底层功能

只需将以下两行代码添加到_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));
},

尽管我知道这已经被接受，但这是基于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");
});

你不妨也blur()将$associatedInput和重点上的下一个输入/选择在你的页面，但是这是不平凡的一般做的，或者是实现特定的。

举例来说，我在正在处理的旧表格页面上进行了此操作（不要让我开始，我知道这是不好的做法！）：

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

您应该使用以下todayBtn选项：

$("...").datepicker({
  todayBtn: "linked"
})

（而不是todayBtn: true）。

今天

布尔值，“链接”。默认值：false

如果为true或“已链接”，则在日期选择器的底部显示“今天”按钮以选择当前日期。如果为true，则“今天”按钮将仅将当前日期移入视图；如果“链接”，则还将选择当前日期。

有关更多详细信息，请参见以下链接：http : //bootstrap-datepicker.readthedocs.io/en/latest/options.html#todaybtn

我不喜欢在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));
    }
})();

我刚刚摆脱了它。

在页面的某些CSS文件中：

.ui-datepicker-current {
    visibility:hidden
}

文档说什么“今天”按钮可以通过以下方式更改标题

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

仅将显示的月份更改为当前。也可以配置此行为

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

之后，按按钮将显示的月份更改为所选日期的月份。

通过设计似乎无法使用此按钮提交日期。

为此，我为日期选择器添加了一个选项：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));

单击“今日”按钮，您也可以尝试使用以下代码在输入框中填写当前日期。只需将下面的代码放在_gotoToday函数中（在函数末尾）中jquery.ui.datepicker.js。

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

请注意，我正在使用1.8.5版的jquery datepicker。

jQuery UI Datepicker今天链接

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

日期选择器被重构为至少10倍更出色。新版本将解决此问题。

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

您也可以尝试将其添加到脚本中：

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

（使用.live函数而不是.click）

这是一种对我有用的黑客，它使用Datepicker的beforeShow回调函数而不是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 {};
     }

这是一个简单的技巧

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

});

我用另一种方法解决了。

我发现导航到某个日期会很烦人，然后即使要已选择日期也要记住单击该日期（单击下一个/上一个月份后）。

在这里，当我们在月/年中移动时，我将直接更新输入字段-单击“今日”按钮时也会触发。我还需要改变事件，火灾时的选择发生了变化。

$input.datepicker({
    ...
    onChangeMonthYear: function (year, month, inst)
    {
        var date = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
        if (!isNaN(date))
        {
            input.value = $.datepicker.formatDate("dd M yy", date);
            $input.change();
        }
    }
}

（请注意，这不是问题。由于其他解决方案对我不起作用，因此我想通过提供解决方案来为您提供帮助。）

我无法让日期选择器与其他任何答案一起隐藏。日历将关闭，然后重新打开。以下代码对我有用，它可以更改“今天”按钮以将日期设置为当天并关闭日历。

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

为了完整起见，我包括了默认值。

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