Introduction:
Here I will explain how to show only month and year dropdownlists in jQuery UI datepicker.
Here I will explain how to show only month and year dropdownlists in jQuery UI datepicker.
Description:
In previous posts I explained Disable future dates in Datepicker, Disable past dates in Datepicker, Disable weekends in datepicker, Show multiple months in datepicker, Show datepicker on button click and many articles relating to JQuery and datepicker. Now I will explain how to show only month and year dropdownlists in jQuery UI datepicker.
In previous posts I explained Disable future dates in Datepicker, Disable past dates in Datepicker, Disable weekends in datepicker, Show multiple months in datepicker, Show datepicker on button click and many articles relating to JQuery and datepicker. Now I will explain how to show only month and year dropdownlists in jQuery UI datepicker.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"
/>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function()
{
$('#datepicker').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'MM
yy',
onClose: function(dateText,
inst) {
var month = $("#ui-datepicker-div
.ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div
.ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new
Date(year, month, 1));
},
beforeShow: function(input,
inst) {
if ((datestr = $(this).val()).length
> 0) {
year = datestr.substring(datestr.length - 4,
datestr.length);
month = jQuery.inArray(datestr.substring(0,
datestr.length - 5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate',
new Date(year, month, 1));
$(this).datepicker('setDate', new
Date(year, month, 1));
}
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
|
If you observe above code in header section I enable
dropdownlists for month and year by setting properties like changeMonth and
changeYear and we written onClose and beforeShow events to show selected date
in textbox instead of current date.
Demo
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
|
|
3 comments :
Nice and very useful code.
moreover my update panel is not working