Datepicker’s Today button problem

One of the features of jQuery UI Datepicker is an option (showButtonPanel) which will display two buttons: Today and Done. One would expect that upon clicking the Today button the today date will also be selected and used in input box. Instead, jQuery UI Datepicker simply selects it.

So to make jQuery UI Datepicker also use that date, you can override the _gotoToday function to also set the date to current datetime. I’ve put this into my jquery.ui.js file at the end, so it overrides this function immediately:

var _gotoToday = jQuery.datepicker._gotoToday;
jQuery.datepicker._gotoToday = function(a){
    var target = jQuery(a);
    var inst = this._getInst(target[0]);
    _gotoToday.call(this, a);
    jQuery.datepicker._selectDate(a, jQuery.datepicker._formatDate(inst,inst.selectedDay, inst.selectedMonth, inst.selectedYear));
}

Tags: , , , , ,

 
 
 

4 Responses to “Datepicker’s Today button problem”

  1. amar nath jena says:

    This code is working fine but if i have used altField then it is not changing that’s value.

  2. jothy says:

    thank u so much for the solution sir

  3. Arian says:

    actually it doesn’t work in IE as well. I think maybe should be:
    target[0].blur();
    But IE has an issue when if you click the Today button and blur, it brings the popup back up? Any ideas?

  4. Arian says:

    I added this to the default jquery button example just to make sure… I think when you click Today, it sets the day correctly in the textfield… but if you click again in the textfield, it doesn’t bring up the datepicker unless weirdly if you click somewhere else on the webpage, and then click the textfield again. I think it needs to be blurred after selecting:

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

    });

Leave a Reply

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close