Turn on Today button on date picker

Question

I am using a date picker from this source http://jqueryui.com/datepicker/#buttonbar , I am trying to let "Today" button on the button bar to be active, can any one help me please.

$(".datepicker").datepicker({
            showButtonPanel: true, closeText: 'Clear',
             gotoCurrent : true,
            changeMonth: true,
            changeYear: true,
            yearRange: '1900, 2300',
            dateFormat: _DateFormatDatePicker,             
            onSelect: function (dateText, inst) {
                dateAsString = dateText; //the first parameter of this function
                var dateAsObject = $(this).datepicker('getDate'); //the getDate method
                document.getElementById('<%=hdnTempDate.ClientID%>').value = dateText;
            }

That may help you to answer me http://api.jqueryui.com/datepicker/#option-currentText — Alaa, Jun 09 '13 at 09:37
Not simple as it appears, take a look here: http://stackoverflow.com/questions/1073410/today-button-in-jquery-datepicker-doesnt-work — Irvin Dominin, Jun 09 '13 at 11:40
check this http://stackoverflow.com/questions/233553/how-do-i-pre-populate-a-jquery-datepicker-textbox-with-todays-date — Mitesh Vora, Jun 09 '13 at 17:16

score 16 · Answer 1 · answered Apr 08 '14 at 19:08

16

Try this:

$(".datepicker").datepicker({
    showOn: "button",
    showButtonPanel: true,
    buttonImage: buttonCalendar,
    buttonImageOnly: true,
    buttonText: ""
});

and call this js code in the pages where you have the calendar.

$.datepicker._gotoToday = function(id) { 
    $(id).datepicker('setDate', new Date()).datepicker('hide').blur(); 
};

answered Apr 08 '14 at 19:08

periback2

1,459
4
19
36

Thanks for the `$.datepicker._gotoToday = function(id) { $(id).datepicker('setDate', new Date()).datepicker('hide').blur(); };` – Linga Aug 19 '16 at 10:54
A bit more correct is `$(id).datepicker('setDate', new Date()).datepicker('hide').blur().change();` – Kotodid Nov 15 '17 at 15:14

score 10 · Answer 2 · edited Aug 19 '16 at 10:43

10

Try this

$(function() {
    $( "#datepicker" ).datepicker({
        showButtonPanel: true
    });
});

edited Aug 19 '16 at 10:43

Linga

10,379
10
52
104

answered Jul 22 '14 at 08:52

R M Shahidul Islam Shahed

1,178
13
13

score 2 · Answer 3 · edited Nov 03 '15 at 12:07

Enable the Buttons panel by: showButtonPanel: true. Then place the following code after your datepicker JS code:

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

score 0 · Answer 4 · answered May 17 '22 at 00:55

Insert this code instead.

todayBtn: "linked",

And a bonus code that clear the input field

clearBtn: true,

Final code:

$(".datepicker").datepicker({
  showButtonPanel: true,
  closeText: 'Clear',
  todayBtn: "linked",
  clearBtn: true,
  gotoCurrent : true,
  changeMonth: true,
  changeYear: true,
  yearRange: '1900, 2300',
  dateFormat: _DateFormatDatePicker,             
  onSelect: function (dateText, inst) {
    dateAsString = dateText; //the first parameter of this function
    var dateAsObject = $(this).datepicker('getDate'); //the getDate method
    document.getElementById('<%=hdnTempDate.ClientID%>').value = dateText;
  }

Turn on Today button on date picker

4 Answers4