Today button in jQuery Datepicker doesn't work

Question

I'm using jQueryUI Datepicker and show "Today" button. But it doesn't work. It also doesn't work in demo: http://www.jqueryui.com/demos/datepicker/#buttonbar

I'w want to fill input with today when press this button.

Is it possible to get it working?

Answer 1

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.

Answer 2

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

Answer 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

Answer 4

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

Answer 5

Though I know this has already been accepted, here is my expanded solution based on Samy Zine's idea. This was using jQuery 1.6.3 and jQuery UI 1.8.16, and worked for me in 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");
});

You may wish to also blur() the $associatedInput and focus on the next input/select in your page, but that is not trivial to do generically, or is implementation-specific.

As an example, I did this on a page I was working on that used tables for layout (don't get me started, I know that is bad practice!):

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

Answer 6

I don't like the idea of adding extra code to jQuery source code. And I don't want to override _gotoToday method by copy-pasting its implementation somewhere in the javascript code and adding extra lines at the bottom.

So, I've tweaked it using this code:

(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

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

Answer 8

Documentation says what "today" button which title could be altered via

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

only changes displayed month to current. This behaviour also could be configured

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

After that pressing the button will change displayed month to selected date's one.

It seems submitting a date with this button is impossible by design.

Answer 9

I have added an option to the datepicker for that purpose: selectCurrent.

To do the same, you just have to add the following to the uncompressed js file:

1) Toward the end of function Datepicker(), add:

selectCurrent: false // True to select the date automatically when the current button is clicked

2) At the end of the _gotoToday function, add:

if (this._get(inst, 'selectCurrent'))
  this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));

Answer 10

I just got rid of it.

In some CSS file that's part of your page:

.ui-datepicker-current {
    visibility:hidden
}

Answer 11

You can try the below code as well to fill current date in input box on click of Today button. Just put the below code in the _gotoToday function (at the end of the function) in jquery.ui.datepicker.js.

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

Please note that I am using version 1.8.5 of jquery datepicker.

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

The datepicker is being refactored to be at least 10 times more awesome. The new version will address this issue.

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

Answer 15

You can also try to add this to your script :

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

( use .live function and not .click)

Answer 16

This is a hack that worked for me that uses the Datepicker's beforeShow callback function as opposed to the live() approach.

     ,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

This is a simple hack

$(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

I solved it a different way.

I find it irritating navigating to a date then having to remember to click on the day even if it is already selected (after clicking next/prev month).

Here I update the input field directly as we move around the months/years - which also fires when the Today button is clicked. 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();
        }
    }
}

Answer 19

(Please note, this isn't a question. I am trying to be helpful by providing my solution since the other solutions did not work for me.)

I couldn't get the datepicker to stay hidden with any of the other answers. The calendar would close and then re-open. The below code worked for me to change the Today button to set the date to the current day and close the calendar.

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

I've included my defaults for completeness.

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