In this article I will explain with an example, how to show Month and Year DropDown in jQuery DatePicker plugin.
The jQuery DatePicker plugin supports option to show Month and Year DropDowns and it can be enabled by setting the changeMonth and changeYear properties of the jQuery DatePicker plugin.
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.
<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'
});
});
</script>
Screenshot
![Show Month and Year DropDown in 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
