jQuery UI Datepicker: Display all 12 months in <select> for current year?

问题

I'm using the jQuery UI Datepicker with these options:

$('#birth_date').datepicker({
        changeMonth: true,
        changeYear: true,
        minDate: new Date(-2206281600*1000),
        maxDate: new Date(1298653687*1000),
        yearRange: '1900:2011'
});

Works pretty well. The month and year are displayed as 2 side-by-side <select> boxes. The problem is, we're only in Feb of 2011. So when the user goes to enter their birth date, to say, Dec, that month isn't available yet. They have to choose their year first before the month becomes selectable.

How can I get into to display all 12 months, even if those months aren't valid options for the current year?

回答1:

For anyone still looking, I ended up using defaultDate to fix this:

$( ".selector" ).datepicker({
  changeMonth: true,
  changeYear: true,
  minDate: '-100Y', //100 Years Old
  maxDate: '0' //Today
  defaultDate: '-1Y', //Default to One Year Ago to show 12 months
  yearRange: '-100:+0' //Show 100 
});

It still limits the date range so no one can pick a date in the future, and doesn't rely on the user inputting in a particular order.

回答2:

Use numberOfMonths to display all 12 months.

$('#birth_date').datepicker({
    numberOfMonths: 12
});

来源：https://stackoverflow.com/questions/5120408/jquery-ui-datepicker-display-all-12-months-in-select-for-current-year