jQuery UI Datepicker with Month Year Dropdown Options

By: Suresh Dasari Jun 16, 2014

Introduction:

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.

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 dropdowns in datepicker we need to write the code like this

<head>

$(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>

</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