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

jQuery UI Datepicker with Month Year Dropdown Options

Jun 16, 2014
Here I will explain how to show 
jQuery UI datepicker with Month Year dropdown Options or jQuery show only month and year dropdowns 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.

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

<html xmlns="" xml:lang="en" lang="en">
<link rel="stylesheet" href="" />
<script src=""></script>
<script src=""></script>
<script type="text/javascript">
$(function() {
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));
.ui-datepicker-calendar {
display: none;
<p>Date: <input type="text" id="datepicker" /></p>
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.


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, 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


Anonymous said...


Give your Valuable Comments

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

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