Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Show Month and Year Only in jQuery UI Datepicker

Nov 18, 2012
Introduction
  
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.

To show only month and year dropdownlists in datepicker we need to write the code like this


<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 RSS subscribe by email Subscribe by Email

9 comments :

Rajesh B said...

Nice and very useful code.

Shankar said...
This comment has been removed by the author.
Shankar said...

moreover my update panel is not working

Raja said...

i need onlu April and October in months selector can any one suggest me...

Anonymous said...

useful code... but after button click it's not working. please suggest what to do

Anonymous said...

excuse me author... ur code not working after button click... can u explain how to make it work?

Unknown said...

is it works for asp controls(TextBox)

Anonymous said...

Textbox event not fired.

Unknown said...

how to download this file

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.