How can I configure the jquery ui date field to make it a good date of birth entry?

Question

I have an entry I need to accept a person's date of birth in. I'm using a default jquery-ui date field but it is difficult for users to enter in a normal DOB using the graphical tools (typing it in is fine, but users keep trying to use the graphical tools of the date entry and get frustrated.)

The problem is that there are only about 20 years in the year selection dropdown field and this isn't sufficient for most people's date of birth. Also the year drop down for a blank field centers around the current year and shows future years, I think it makes sense for the last acceptable year to be the current year (maybe next year for newborns) and the first year should be like 1901 (or so.)

Answer 1

You can use the minDate, maxDate and yearRange options of the plugin to increase its range of possibilities.

minDate - http://jqueryui.com/demos/datepicker/#option-minDate

$('.selector').datepicker({ minDate: new Date(2007, 1 - 1, 1) });

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

$('.selector').datepicker('option', 'maxDate', '+1m +1w');

yearRange - http://jqueryui.com/demos/datepicker/#option-yearRange

$('.selector').datepicker('option', 'yearRange', '2000:2010');

Answer 2

The minDate, yearRange and changeYear options of Datepicker should work.

In particular, try the following:

$('.selector').datepicker('option', 'yearRange', '1901:2009');

Answer 3

You can pass options to the datepicker stating how many years you wish to display - check out the minDate, maxDate and yearRange options here:

http://docs.jquery.com/UI/Datepicker#options