jQuery Datepicker 中的今天按钮不起作用答案

【问题标题】：Today button in jQuery Datepicker doesn't workjQuery Datepicker 中的今天按钮不起作用
【发布时间】：2010-11-07 14:06:39
【问题描述】：

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

当我按下这个按钮时，我想用今天来填充输入。

有可能让它工作吗？

【问题讨论】：

标签： jquery-ui datepicker

【解决方案1】：

我不喜欢修改 jQuery 源代码的解决方案，因为它消除了使用 CDN 的能力。相反，您可以通过在页面的 JavaScript 范围文件中的某处包含此基于 @meesterjeeves answer 的代码来重新分配 _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 的整个 mumble-jumbo，因为该选项对于我们“今天”的新含义没有意义。

【讨论】：

我将它与 jquery-1.6.2.min.js 和 /1.8.15/jquery-ui.min.js 一起使用，它们不是最新版本。新版本中的代码更改可能会破坏此 hack。
非常感谢。一直在尝试各种方法使“今天”按钮在 IE 中以这种方式运行，但您的方法是唯一有效的。
这适用于 IE 7 及更高版本以及 Firefox 和 Chrome。
非常感谢。我一直在寻找这个问题的解决方案。
这个更短的版本对我有用（在 v1.10.3 上）：$.datepicker._gotoToday = function (id) { $(id).datepicker('setDate', new Date()).datepicker('hide').blur(); };

【解决方案2】：

他们的代码并没有真正被破坏。它只是没有做大多数人期望它做的事情。也就是在输入框中输入今天的日期。它的作用是突出显示用户在日历上查看今天的日期。如果他们在另一个月或另一年关闭，日历会弹出回今天的视图，而不会取消选择用户已经选择的日期。

为了使其更直观，您需要更新插件代码以满足您的需求。告诉我进展如何。

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

【讨论】：

我不喜欢修改 jQuery 源代码的解决方案，因为它取消了使用 CDN 的能力。请参阅我的回答，了解如何在不更改插件代码文件的情况下修改 _gotoToday 函数。（如果 cmets 可以包含语法突出显示，我会将其保留为评论而不是答案）
我更喜欢 GregL 的建议。
@WalterStabosz comments can include syntax highlighting
@AdrienBe 谢谢，我不知道在 2011 年...我会修复它，但 SO 只允许在发布后 5 分钟编辑 cmets :)
<light-hearted-sarcasm>"他们的代码并没有真正损坏。它只是没有按照大多数人的预期去做" - 在大多数人看来，这就是损坏的定义 ;-)@987654323 @

【解决方案3】：

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

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

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

【讨论】：

小车（日历不会重新出现，直到焦点被移除）但其他方面都很好。
使用 1.10.2，效果很好。在我的 shim 配置中为 requirejs 添加了它：shim: { 'datepicker': { deps: ['jquery','ui_core'], init: function ($, core) { var oldGoToToday = $.datepicker._gotoToday $.datepicker._gotoToday = function(id) { oldGoToToday.call(this, id); this._selectDate(id); }; } }, }
这对我有用，焦点问题不是问题，因为我使用仅在图标单击时打开的选项，但如果其他人正在处理焦点和样式问题，这里有更多答案：@ 987654321@
如果您喜欢此解决方案并希望输入也失去焦点，只需在this._selectDate(id) 之后添加$(id).blur();。
@itslittlejohn：很好的提示；不幸的是，IE 11 及更低版本需要额外的调整，否则对话框将立即弹出：附加 $(id).datepicker('option', 'showOn', null); setTimeout(function () { $(id).datepicker('option', 'showOn', 'focus') }) 以暂时禁用日期选择器，然后在 blur 事件处理完成后重新启用它。

【解决方案4】：

您应该使用todayBtn 选项：

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

（而不是todayBtn: true）。

todayBtn

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

如果为 true 或“已链接”，则在底部显示“今天”按钮 datepicker 选择当前日期。如果为真，“今天”按钮只会将当前日期移动到视图中；如果“链接”，当前日期也会被选中。

更多详情请看以下链接： http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#todaybtn

【讨论】：

请注意，这是针对 Bootstrap 日期选择器，而不是提问者正在寻找的 jQuery UI 日期选择器。
即使这个答案是错误的日期选择器，我实际上是在查看引导日期选择器并找到了这个答案，它解决了我的问题！谢谢：D

【解决方案5】：

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

【讨论】：

【解决方案6】：

虽然我知道这已被接受，但这是我基于Samy Zine's idea 的扩展解决方案。这是使用 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();

【讨论】：

更新：我确实在 IE（大多数版本）中发现了我的解决方案的问题。我最终选择了 Walter Stabosz 的方法，它在 IE（以及其他浏览器）中确实有效。

【解决方案7】：

我不喜欢在 jQuery 源代码中添加额外代码的想法。而且我不想通过在 javascript 代码中的某处复制粘贴其实现并在底部添加额外的行来覆盖 _gotoToday 方法。

所以，我使用以下代码对其进行了调整：

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

【讨论】：

【解决方案8】：

我刚刚摆脱了它。

在您页面的某些 CSS 文件中：

.ui-datepicker-current {
    visibility:hidden
}

【讨论】：

这样做没有意义，因为您可以传递隐藏按钮的选项。 showButtonPanel:false - 这是默认值。
不，因为他只隐藏了今天按钮，而不是完成按钮。

【解决方案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】：

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

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

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

【讨论】：

【解决方案12】：

jQuery UI Datepicker Today Link

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

【讨论】：

这会正确设置当前日期，但会在设置后重新打开日期选择器弹出窗口。

【解决方案13】：

$.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">

【讨论】：

【解决方案14】：

日期选择器被重构为至少 10 倍更棒。新版本将解决这个问题。

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

【讨论】：

【解决方案15】：

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

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

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

【讨论】：

【解决方案16】：

这是一个对我有用的 hack，它使用 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 {};
     }

【讨论】：

只有当您从不更改日历上的月份/年份时，此功能才有效，如果您更改一次月份，“今天”按钮将像往常一样工作。

【解决方案17】：

这是一个简单的技巧

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

});

【讨论】：

【解决方案18】：

我用不同的方法解决了。

我发现导航到某个日期然后不得不记住单击该日期，即使它已经被选中（在单击下一个/上一个月份之后），这很烦人。

在这里，当我们移动月份/年份时，我会直接更新输入字段 - 当点击 Today 按钮时也会触发。 I also need the change event to fire whenever the selection has changed.

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

【讨论】：

【解决方案19】：

我得到 datetimepicker 的解决方案是像这样在代码中简单地添加图标属性

//And the script part like this
$('#fromFilterDate').datetimepicker({
    format: 'YYYY-MM-DD',
    showTodayButton :true,
    icons: {
      today:'fa fa-crosshairs'
    }
  });

From Date
<input name = "fromFilterDate" autocomplete="off"  id="fromFilterDate" type="text" class="form-control">

【讨论】：

【解决方案20】：

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

我无法让日期选择器隐藏在任何其他答案中。日历将关闭然后重新打开。下面的代码为我更改了“今天”按钮以将日期设置为当天并关闭日历。

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

【讨论】：

答案区域用于回答问题，而不是后续问题。请考虑将其发布为问题（链接到其中的问题），或作为对问题或现有答案之一的评论。