jQuery DatePicker: When clicking on Today and then

问题:

When using datepicker, when I click on the "Today" button then today's date is shown in datepicker. However, when I click on the "Done" button then today's date is not displayed in the field. Currently, I have to actually click on the date (i.e., Today -> select date). I would prefer clicking Today -> Done.

How can I click on a date field, click on the "Today" button and then click on the "Done" button and to have today's date reflected in the date field?

Update:

Below is what I am experimenting with. Pardon the mess - I am 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());
        });
        *@
    });

回答1:

You can fix it with something very similar to the example given by Stephen in the comments, it just needed tweaking slightly to get the event handler to work properly, and to stop it immediately closing the datepicker after "Today" was clicked:

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

Working example here: http://jsfiddle.net/5ornc4gv/12/

Edit

If you have multiple datepickers on the page with the same "datepicker" CSS class, the click event above will change the date on all of them.

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

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

Credit to this answer: https://stackoverflow.com/a/5325284/5947043 for the correct method to use.