Question

I’m using the JQuery UI datepicker plugin with

changeMonth: true,
changeYear: true

But the text field that holds the date only updates when the user actually clicks a day. If the user selects a month and year and then clicks outside the datepicker popup, I want the field to contain the first day of the month and year selected.

Currently the text field doesn’t update unless the user actually clicks a particular day. Can anyone familiar with the plugin tell me if there is a way to fix this?

Answer 1

You could populate the text of the field yourself by defining the onChangeMonthYear callback function
From the docs:

onChangeMonthYear: Allows you to define your own event 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 examples

Supply a callback function to handle the onChangeMonthYear event as an init option.

$('.selector').datepicker({
   onChangeMonthYear: function(year, month, inst) { ... }
});

so this is what you would want:

  $('.selector').datepicker({
   onChangeMonthYear: function(year, month, inst) { 
       $(this).val(month + "/" + year);
   }
});

Example here