jQuery UI Datepicker Month & Year Menus Only Work Once

Question

I'm using jQuery UI's month and year menus. Here's what's happening and where I'm running into an issue:

Click the date field
Change the month dropdown to Jan
Change the year dropdown to 2003
Click the calendar day 1
The date field is correctly populated with 01/01/2003

Here's where I run into the issue:

Click the date field (again)
Change the month (or year) dropdown
The date does not change
Click off of the datepicker to hide it
The date still does not change

Is there a way to use the month or year dropdowns after a date has been entered?

<p>Date: <input type="text" id="datepicker" /></p>

$(function() {
    $( "#datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true
    });
  });

If you select a date, then try to change the month or year, it won't work. — Ryan
Work as expected on the documentation : jqueryui.com/datepicker/#dropdown-month-year — Alvaro

Irvin Dominin Irvin Dominin · Accepted Answer · 2013-07-17T16:36:52

By design, the month-year change doesn't refresh the datepicker; you can set the new selected date (from dropdowns too) using the onChangeMonthYear option:

Called when the datepicker moves to a new month and/or year. The function receives the selected year, month (1-12), and the datepicker instance as parameters. this refers to the associated input field.

Code:

$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    onChangeMonthYear: function (year, month, day) {
        $(this).datepicker('setDate', new Date(year, month - 1, day.selectedDay));
    }
});

Working fiddle: http://jsfiddle.net/7Xdhy/

jQuery UI Datepicker Month & Year Menus Only Work Once

2 Answers