Date picker Range of years

I want to use the date picker helping the users to select their birthday. So I need a possibility to customize the range of the years that will be shown. How can I do this?

on your page, there will be code similar to this:

$(function(){
	$('#datepicker_1').datepicker({
		dateFormat: 'mm/dd/yy',
		showAnim: 'show',
		onClose: closeDatePicker_datepicker_1
	});
});

that creates the date picker object.

you can add minDate and maxDate arguments to restrict the date range that will be displayed by the date picker:

$(function(){
	$('#datepicker_1').datepicker({
		dateFormat: 'mm/dd/yy',
		showAnim: 'show',
		onClose: closeDatePicker_datepicker_1,
		minDate: new Date(2010, 0, 1),
		maxDate: new Date(2012, 11, 31)
	});
});

this sets the available date range to 1/1/2010 and 12/31/2012

Originally Said By: Jason Byrnes

  on your page, there will be code similar to this:

$(function(){
	$('#datepicker_1').datepicker({
		dateFormat: 'mm/dd/yy',
		showAnim: 'show',
		onClose: closeDatePicker_datepicker_1
	});
});

that creates the date picker object.

you can add minDate and maxDate arguments to restrict the date range that will be displayed by the date picker:

$(function(){
	$('#datepicker_1').datepicker({
		dateFormat: 'mm/dd/yy',
		showAnim: 'show',
		onClose: closeDatePicker_datepicker_1,
		minDate: new Date(2010, 0, 1),
		maxDate: new Date(2012, 11, 31)
	});
});

this sets the available date range to 1/1/2010 and 12/31/2012  

My Datepicker does not contain any code like this. I am finding

<script type="text/javascript">
$(function(){
$('#Registration_group_1_Date_Of_Birth').datepicker({
changeMonth: true,
changeYear: true,
onClose: closeDatePicker_Registration_group_1_Date_Of_Birth
});
});
function closeDatePicker_Registration_group_1_Date_Of_Birth() {
var tElm = $('#Registration_group_1_Date_Of_Birth');
if (typeof Registration_group_1_Date_Of_Birth_Spry != null && typeof Registration_group_1_Date_Of_Birth_Spry != "undefined") {
Registration_group_1_Date_Of_Birth_Spry.validate();
}
var docElm = document.getElementById("Registration_group_1_Date_Of_Birth");
var tBlur = docElm.getAttribute("onBlur");
if (!tBlur) tBlur = docElm.getAttribute("onblur");
if (!tBlur) tBlur = docElm.getAttribute("ONBLUR");
if (tBlur) {
tBlur = tBlur.replace(/\bthis\b/g, "docElm");
eval(tBlur);
}
}

var Registration_group_First_Name_Spry = new Spry.Widget.ValidationTextField("Registration_group_First_Name_Spry", "none",{validateOn:["blur"]});
var Registration_group_Last_Name_Spry = new Spry.Widget.ValidationTextField("Registration_group_Last_Name_Spry", "none",{validateOn:["blur"]});
var Registration_group_Email_Spry = new Spry.Widget.ValidationTextField("Registration_group_Email_Spry", "none",{validateOn:["blur"]});
var Registration_group_SK_Name_Spry = new Spry.Widget.ValidationTextField("Registration_group_SK_Name_Spry", "none", { is_unique:true , validateOn:["blur"]});
var Registration_group_Password_Spry = new Spry.Widget.ValidationPassword("Registration_group_Password_Spry", { isRequired:true , validateOn:["blur"]});
var Registration_group_Confirm_Spry = new Spry.Widget.ValidationConfirm("Registration_group_Confirm_Spry", "Registration_group_Password",{validateOn:["blur"]});
var Registration_group_1_Date_Of_Birth_Spry = new Spry.Widget.ValidationTextField("Registration_group_1_Date_Of_Birth_Spry", "date", { format:'mm/dd/yyyy' , validateOn:["blur"]});</script>
</div>

<script type="text/javascript">
<!--
var Registration_group_1_FaceBook_Profile_Spry = new Spry.Widget.ValidationTextField("Registration_group_1_FaceBook_Profile_Spry", "url",{validateOn:["blur"]});
//-->
</script>

How do I set it to show dates before 2002?

the code that defines the date picker in the code you posted is:

$(function(){
$('#Registration_group_1_Date_Of_Birth').datepicke r({
changeMonth: true,
changeYear: true,
onClose: closeDatePicker_Registration_group_1_Date_Of_Birth
});
});

you can add the min and max date lines to that code:

$(function(){
$('#Registration_group_1_Date_Of_Birth').datepicke r({
changeMonth: true,
changeYear: true,
minDate: new Date(2000, 0, 1),
maxDate: new Date(2012, 11, 31),
onClose: closeDatePicker_Registration_group_1_Date_Of_Birth
});
});

to show date before 2002, set the min date to use a year prior to 2002, for example:
minDate: new Date(2000, 0, 1),

I have a related request, but I cannot hard code it to a date range.
User needs to pick year of their birth. Drop down allows the functionality but it is a little clunky in that it defaults to a range of 2004 to 2023. User can reselect to get 1984 to 2003 but it is not overly intuitive because they have to first pick 2004, then reselect. I do not need any forward dates at all and I would like the user to be able to scroll through the years rather than have to reselect.

Use the year range option, and echo the current year using php date as the max year:

$(function(){
	$('#datepicker_1').datepicker({
		dateFormat: 'mm/dd/yy',
		showAnim: 'show',
		changeYear: 'true',
		yearRange: "1939:<?php echo(date("Y")); ?>",
		onClose: closeDatePicker_datepicker_1
	});
});

that will set the year range in the year select list to 1939 - 2014


more details on the date picker api can be found here:
http://api.jqueryui.com/datepicker/#option-yearRange