Show only Month and Year in jQuery UI
http://www.jquerybyexample.net/2012/06/show-only-month-and-year-in-jquery-ui.html
HTML
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css">
Select Date : <input type='text' id='txtDate' />
CSS
body
{
font-family:Arial;
font-size : 10pt;
padding:15px;
}
.ui-datepicker-calendar {
display: none;
}
JavaScript
$(document).ready(function() {
$('#txtDate').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'MM yy',
onClose: function() {
var iMonth = $("#ui-datepicker1-div .ui-datepicker1-month :selected").val();
var iYear = $("#ui-datepicker1-div .ui-datepicker1-year :selected").val();
$(this).datepicker('setDate', new Date(iYear, iMonth, 1));
},
beforeShow: function() {
if ((selDate = $(this).val()).length > 0)
{
iYear = selDate.substring(selDate.length - 4, selDate.length);
iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
$(this).datepicker('setDate', new Date(iYear, iMonth, 1));
}
}
});
});