Today button in jQuery Datepicker not working

Question

I am using jQueryUI Datepicker and showing the Today button. But that will not work. It also does not work in the demo: http://www.jqueryui.com/demos/datepicker/#buttonbar

I want to fill in the input today when I click this button.

Is it possible to make it work?

Answer 1

Their code is not really broken. It just doesn't do what most people would expect. Which should enter today the date in the input field. What he does is a key point so that the user can see today's date on the calendar. If they disconnect after a month or another year, the calendar returns to today's view without deselecting the date that the user has already selected.

To make it more intuitive, you need to update the plugin code to suit your needs. Let me know how this happens.

You need to get an uncompressed version of jquery-ui javascript. I am watching version 1.7.2, and the "_gotoToday" function is on line 6760. Just add a call to this _gotoToday, which disables the _selectDate () function on line 6831. :) Happy Coding.

Answer 2

I don’t like the jQuery source code change solution because it eliminates the possibility of using CDN. Instead, you can reassign the _gotoToday function by including this code based on @meesterjeeves answer somewhere in your 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 code above is essentially the same as the jQuery UI Datepicker from version 1.10.1, with the exception of the two lines noted above. All gotoCurrent with gotoCurrent can actually be deleted, since this parameter does not make sense with our new value "today".

Answer 3

I think the best way to handle this is to override the _goToToday method outside the library itself. This solved the problem for me:

 var old_goToToday = $.datepicker._gotoToday $.datepicker._gotoToday = function(id) { old_goToToday.call(this,id) this._selectDate(id) } 

Simple and does not require hacking of any events or changing any basic functions

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

Although I know that this has already been taken, here is my extended solution based on Sami Zin's Idea . This used 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 date var $associatedInput = $(associatedInputSelector).datepicker("setDate", new Date()); // (optional) close the datepicker once done $associatedInput.datepicker("hide"); }); 

You can also blur() $associatedInput and focus on the next input / selection on your page, but this is not the case in general or implementation-specific ways.

As an example, I did this on the page where I worked on the tables used for the layout (don't get me started, I know this 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 redefine the _gotoToday method, copying its implementation somewhere in javascript code and adding extra lines at the bottom.

So, I changed it with 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, "connected." Default: false

If true or “linked,” displays the Today button at the bottom of the date picker 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 information, go to the following link: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#todaybtn

Answer 8

The documentation says that the “today” button, whose name can be changed using

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

only the current month changes. This behavior can also be customized.

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

After that, pressing the button will change the displayed month to the selected date.

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

Answer 9

I just got rid of it.

In some CSS files, this part of your page:

 .ui-datepicker-current { visibility:hidden } 

Answer 10

You can also try using the code below to fill in the current date in the input field when you click the Today button. Just put the code below 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 11

I added a datepicker parameter for this purpose: selectCurrent.

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

1) At the end of the Datepicker () function, 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 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

Datpicker is reorganized at least 10 times more surprising. The new version will address this issue.

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

Answer 15

You can also try adding this to your script:

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

(use the .live function, not the .click function)

Answer 16

This is the hack that worked for me, which uses the Datepicker beforeShow callback function, unlike the live () method.

  ,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 decided it differently.

I find it annoying when moving to a date, so don't forget to click on the day, even if it is already selected (after clicking on the next / previous month).

Here I update the input field directly when we move through the months / years, which also works when the "Today" button is clicked. I also need the change event to fire whenever the selection changes.

 $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

(Note that this is not a question. I try to be helpful in providing my solution, as other solutions do not work for me.)

I could not get the datepicker to stay hidden with any other answers. The calendar closes and then reopens. The following 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 have included my default values ​​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 });