CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-datepicker
Jon
Jon

Reputation: 19

Prevent JQuery datepicker date wrap around

I have a jquery datepicker used to select a birth date that has a range of 'present' to 100 years in the past.

$("#dateOfBirth").datepicker({
    changeYear: true,
    yearRange: "-100:+0"
});

Once the datepicker pops up, the user can 'scroll forward' through the years. Because of the date range, the next year after the present (2012) is a hundred years in the past (1912).

This behaviour causes confusion.

Is it possible to stop the dates wrapping around to the beginning to the date range?

Upvotes: 2

Views: 263

Answers (1)

Adriano Carneiro
Adriano Carneiro

Reputation: 58615

Change the approach and use minDate and maxDate properties instead of yearRange. yearRange is only for setting the content of that select, it doesn't limit the dates the user can input.

See how it looks here: http://jqueryui.com/datepicker/#min-max

In your case, you can probably just add

maxDate: "0"

to your options: http://jsbin.com/uducov/1 That tells the datepicker to make "today" the max date that can be picked, and it prevents the paging forward via the > button.

Notice that both minDate and maxDate accept a string with relative dates.

Upvotes: 3

Related Questions