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
|
|||
9 comments :
Nice and very useful code.
moreover my update panel is not working
i need onlu April and October in months selector can any one suggest me...
useful code... but after button click it's not working. please suggest what to do
excuse me author... ur code not working after button click... can u explain how to make it work?
is it works for asp controls(TextBox)
Textbox event not fired.
how to download this file
Note: Only a member of this blog may post a comment.