jQuery UI: Datepicker for birth date input July 11, 2009

I decided to use jQuery UI Datepicker control for one of project and faced with the some strange behavior. At first, I decided to find a way to select month and year quickly because switching months with previous button will unhappy every user. So I’ve added the following options:

$(‘#datepicker’).datepicker({
    changeMonth: true,
    changeYear: true
});

Well it’s much better already but here I found that not much years are displayed in the dropdown – only from 1999 to 2019. I spent about minute to find out that range changes when I select year. So it shows -10 year as down date and +10 years as up value (from client I just got email that he cannot select his birth year so I bet whether this logic of work is useful).

To set fixed range of years in dropdown you need to use yearRange option. For instance, in my case it is:

$(‘#datepicker’).datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: ‘1910:2000’
});

Another interesting thing is that datepicker doesn’t allow me to select my birth day :) When I select March 1983 it shows days from 1 to 5 only:

picture-1

 
11 Comments
MikeyB September 28th, 2010

Thanks for the post – just came across the exact same issues when selecting DOB. The yearRange was the trick I was missing.

Thanks for the post!

 
vic September 30th, 2010

If you dont want a fixed date range you could also make the range relative to todays date by doing the following

today’s year of 2010
yearRange: ‘-100:+0’

Results in
date picker start year: 1910
date picker end year: 2010

today’s year of 2010
yearRange: ‘-100:-5’

Results in
date picker start year: 1910
date picker end year: 2005

 
selva December 4th, 2010

Thanks for your post for date of birth options for ui datepicer…..

 
Jagpreet Singh November 14th, 2011

Thank You so much… Great help! :)

 
Jagpreet Singh November 14th, 2011

My Code –

var curDate = new Date();
var y = curDate.getFullYear();
var limitString = “1900:” + y;
$(“#dob”).datepicker({
changeMonth: true,
changeYear: true,
yearRange: limitString,
maxDate: curDate
});

 
Kees January 28th, 2012

Thanks dude, it did the trick

 
Torteg January 31st, 2012

Fucking great!

 
rg June 11th, 2012

you could as well do:
yearRange: “c-120:c”

this will allow ages from currentYear-120 till curYear

 
Apit John December 23rd, 2012

Thanks Bro…really appreciate it

 
sarir May 9th, 2013

thanks bro it was really very needful and i got my work done…hats off

 
mgmellos March 8th, 2014

Fantastic – just what I was looking for. Thanks.

 
Leave a Reply