开发者

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

开发者 https://www.devze.com 2023-02-13 06:15 出处:网络
I\'m using the jQuery UI Datepicker with these options: $(\'#birth_date\').datepicker({ changeMonth: true,

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 display开发者_StackOverflow中文版ed 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?


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.


Use numberOfMonths to display all 12 months.

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


You probably have the maxDate set to some when in the middle of the year. Let us say that you set it to Oct 21 of 2020. If the year is 2020 in the dropdown, you will not be allowed to select Nov nor Dec due to the maxDate restriction. If you change the year to any year before 2020 (not minDate year), you will be allowed to select all 12 months. If you select the "minYear", Jan - Sep will not be displayed due to the minDate restriction. This is an intended feature.

0

精彩评论

暂无评论...
验证码 换一张
取 消