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

Question

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

按下此按钮,我想今天填写输入.

是否有可能让它运作？

Answer 1

我不喜欢修改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实际上可以删除整个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

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

Answer 5

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

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

Answer 7

您应该使用以下todayBtn选项：

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

（而不是todayBtn: true）。

今天

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

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

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