Increase range of date options in jquery UI datepicker

668 Views Asked by At

I'm using jquery's datepicker for users to select their DOB. I set the default to 01/01/1980 so that its a little easier to select your DOB (our constraint is that your age > 18 years.

I set minDate to be 100 years in the past from today. When I toggle the datepicker, the minimum date appears to be 1970. If I select it, close the datepicker, and open it again, I can go further back (to select 1960 for example). I would like to allow users to select a date preceding 1970 without having to do this.

1970 constrained

Code:

$(function() {
  $( "#id_date_of_birth" ).datepicker({
    changeMonth: true,
    changeYear: true,
    maxDate: "-18Y",
    minDate: "-100Y",
    defaultDate: '01/01/1980'
   });
 });
1

There are 1 best solutions below

0
On

It looks like the range cap happens to be about an 18 year split.
That might be related to your maxDate

Try omitting the maxDate or increasing it to see if you're still capped at 1970 on the first opening of the dropdown.

If that works, you can play with your defaultDate and maxDate to get the desired range.

From the Docs:

maxDate

The maximum selectable date. When set to null, there is no maximum. Multiple types supported:

Date: A date object containing the maximum date.

Number: A number of days from today. For example 2 represents two days from today and -1 represents yesterday.

String: A string in the format defined by the dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.

http://api.jqueryui.com/datepicker/#option-maxDate