Today button in jQuery Datepicker doesn't work

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.

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

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

I just got rid of it.

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

.ui-datepicker-current {
    visibility:hidden
}

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.

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.

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

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

I got the solution for datetimepicker is to simple add icons properties in your code like this

//And the script part like this
$('#fromFilterDate').datetimepicker({
    format: 'YYYY-MM-DD',
    showTodayButton :true,
    icons: {
      today:'fa fa-crosshairs'
    }
  });

From Date
<input name = "fromFilterDate" autocomplete="off"  id="fromFilterDate" type="text" class="form-control">