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

Question

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

中也不起作用

当按下此按钮时，我想填写今天的输入。

是否有可能让它发挥作用？

Answer 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，因为我们对“今天”的新含义没有意义。

Answer 2

他们的代码并没有真正破解。它只是没有做大多数人期望它做的事情。这是将今天的日期输入到输入框中。它做了什么，是用户在日历上查看今天日期的重点。如果他们在另一个月或另一年关闭，日历会弹回到今天的视图，而不会取消选择用户已选择的日期。

为了使其更直观，您需要更新插件代码以满足您的需求。让我知道它是怎么回事。

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

Answer 3

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

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

简单，不要求您破解任何事件或更改任何基础功能

Answer 4

Answer 5

虽然我知道这已被接受，但这是我基于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();

Answer 6

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

Answer 7

您应该使用todayBtn选项：

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

（而不是todayBtn: true）。

  

<强> todayBtn

     

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

     

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

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

Answer 8

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

Answer 9

文档说明了“今天”按钮哪个标题可以通过

进行更改

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

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

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

之后按下按钮会将显示的月份更改为所选日期的一个。

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

Answer 10

我摆脱了它。

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

.ui-datepicker-current {
    visibility:hidden
}

Answer 11

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

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

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

Answer 12

jQuery UI Datepicker Today Link

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

Answer 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">

Answer 14

日期选择器被重构为至少10倍的真棒。新版本将解决此问题。

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

Answer 15

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

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

（使用.live功能，而不是.click）

Answer 16

对我来说这是一个使用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 {};
     }

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

});

Answer 18

我用另一种方式解决了它。

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

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

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

Answer 19

（请注意，这不是一个问题。我正在尝试提供我的解决方案，因为其他解决方案对我不起作用。）

我无法让datepicker与其他任何答案保持隐藏状态。日历将关闭然后重新打开。下面的代码可以让我更改今日按钮，将日期设置为当天并关闭日历。

jQuery UI - v1.11.4 jQuery JavaScript Library 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
    });