Show only Month and Year in jQuery UI DatePicker
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;
}
.ui-datepicker-month >option {
}
select{
display: flex;
justify-content: flex-start;
}
JavaScript
$(document).ready(function() {
$('#txtDate').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'MM yy',
onClose: function() {
var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var iYear = $("#ui-datepicker-div .ui-datepicker-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('div', 'monthNames'));
$(this).datepicker('div', 'defaultDate', new Date(iYear, iMonth, 1));
$(this).datepicker('setDate', new Date(iYear, iMonth, 1));
}
}
});
});