In this article I will explain with an example, how to set Year Range in Year DropDown of jQuery DatePicker (Calendar) plugin.
The jQuery DatePicker (Calendar) plugin has a property yearRange which can be used to set the different Year ranges for the Year DropDown.
HTML Markup and jQuery DatePicker implementation
The following HTML Markup consists of a TextBox which has been made Read Only.
Inside the jQuery document ready event handler, the TextBox has been applied with jQuery DatePicker plugin.
The jQuery DatePicker plugin has been assigned following properties:
showOn – button
The jQuery DatePicker will be shown only when the Button next to the TextBox is clicked.
buttonImageOnly – true
The Button will be an Image.
buttonImage – URL
The URL of the Image file to be displayed as Button.
dateFormat – dd/mm/yy
The jQuery DatePicker will set the selected Date in dd/MM/yyyy date format in TextBox.
changeMonth – true
The jQuery DatePicker will show the Month DropDown in Calendar.
changeYear – true
The jQuery DatePicker will show the Year DropDown in Calendar.
yearRange – Year range value
Following are some examples of Year range which can be set.
|
-10:+10
|
Current Year -10 to Current Year + 10.
|
|
+0:+10
|
Current Year to Current Year + 10.
|
|
1900:+0
|
Year 1900 to Current Year.
|
|
-0:+0
|
Only Current Year.
|
|
2025
|
Only Year 2025.
|
<input type="text" id="txtDate" name="SelectedDate" readonly="readonly" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<link href="https://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,
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'images/calendar.gif',
dateFormat: 'dd/mm/yy',
yearRange: '-10:+10' //Current Year -10 to Current Year + 10.
//yearRange: '+0:+10' //Current Year to Current Year + 10.
//yearRange: '1900:+0' //Year 1900 to Current Year.
//yearRange: '1985:2025' //Year 1985 to Year 2025.
//yearRange: '-0:+0' //Only Current Year.
//yearRange: '2025' //Only Year 2025.
});
});
</script>
Screenshot
![Set Year Range in Year DropDown of jQuery DatePicker]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
