The below code snippet explains how to set the start and end year range in jQuery UI Datepicker Plugin.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type = "text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type = "text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel = "Stylesheet" type="text/css" />
<script type = "text/javascript">
<!--
$(function () {
$("#txtDate").datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1950:2011'
});
});
//-->
</script>
<input type = "text" id = "txtDate" />
Explanation:
jQuery UI Datepicker has a yearRange property which allows user to set the start and end year range that will be displayed the Year Dropdown within the jQuery UI Datepicker.
The syntax of the value is '{Start-Year}:{End-Year}'. In the above example I have set the start year as 1950 and the end year as 2011.
Dynamically detect the current year and set it as end year
If you want to dynamically set the end year as per the current year, you can do it in the following way.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type = "text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type = "text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel = "Stylesheet" type="text/css" />
<script type = "text/javascript">
<!--
$(function () {
$("#txtDate").datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1950:' + new Date().getFullYear().toString()
});
});
//-->
</script>
<input type = "text" id = "txtDate" />
Explanation:
In the above code snippet the only difference is that I am detecting the end year using the JavaScript date library getFullYear method.