Today button in jQuery Datepicker doesn't work

Solution 1:

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:

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

Solution 2:

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.

Solution 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:

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

Solution 4:

You should use the todayBtn option:

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

(instead of todayBtn: true).

todayBtn

Boolean, “linked”. Default: false

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.

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

Solution 5:

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

/* 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));
},