JQuery DatePicker: Clicking Today or Done does not save today's date

Question

When using datepicker, when I click the Today button, today's date is displayed in datepicker. However, when I click Finish, today the date is not displayed in the field. Currently I have to click on a date (i.e. Today → select a date). I would rather click Today → Done.

How can I click on the date field, click the Today button, and then click the Finish button and display today's date in the date field?

Update:

Below I am experimenting. Sorry about the mess - I'm new to jQuery / javascript.

$(document).ready(function () { $(".datePicker").datepicker({ changeMonth: true, changeYear: true, dateFormat: "yy-mm-dd", yearRange: 2000:c+1, showButtonPanel: true, @* beforeShow: function (input, instance) { $(input).datepicker('setDate', new Date()); } *@ }); $('.datePicker').click(function () { $('button.ui-datepicker-current').removeClass('ui-priority-secondary').addClass('ui-priority-primary'); }); $(document).on('click', "button.ui-datepicker-current", function () { $(".datePicker").datepicker('setDate', new Date()) }); @* Set focus to the next datepicker. This allows the user to re-select the same date field. Otherwise, a user must click another date field in order to be able to re-select the date field. *@ $("body").delegate("button[data-handler=today]", "click", function () { $("#Date").datepicker("setDate", new Date()).datepicker("hide"); $("#RDate").focus(); }); @* This does not work, but provided for ideas. $(".datepicker").each(function () { $(this).datepicker('setDate', $(this).val()); }); *@ }); 

Answer 1

You can fix this with something very similar to the example given by Stephen in the comments, he just needs to configure a bit for the event handler to work correctly, and to stop it closing the datepicker right away after clicking Today:

 $(document).ready(function() { $(".datePicker").datepicker({ changeMonth: true, changeYear: true, dateFormat: "yy-mm-dd", yearRange: "2000:c+1", showButtonPanel: true }); $(document).on('click', "button.ui-datepicker-current", function() { $(".datePicker").datepicker('setDate', new Date()) }); }); 

A working example is here: http://jsfiddle.net/5ornc4gv/12/

Edit

If there are multiple datepikers on the page with the same CSS class “datepicker”, the click event above will change the date on all of them.

To prevent this, modify the click event handler as follows:

 $(document).on('click', "button.ui-datepicker-current", function() { $.datepicker._curInst.input.datepicker('setDate', new Date()) }); 

Confirm this answer: fooobar.com/questions/89395 / ... for the correct use of the method.