JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<input type="text" id="datepicker1" name='date1'/>
<input type="text" id="datepicker2" name='date2'/>
CSS
.just-yaer .ui-datepicker-prev,
.just-yaer .ui-datepicker-next,
.just-yaer .ui-datepicker-month,
.just-yaer .ui-datepicker-calendar {
display: none;
}
.just-month .ui-datepicker-prev,
.just-month .ui-datepicker-next,
.just-month .ui-datepicker-year,
.just-month .ui-datepicker-calendar {
display: none;
}
JavaScript
$(function() {
$('#datepicker1').datepicker( {
changeMonth: false,
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy',
showAnim: '',
beforeShow: function( input, inst){
$(inst.dpDiv).addClass('just-yaer');
},
onClose: function(dateText, inst) {
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, 1));
$(inst.dpDiv).removeClass('just-yaer');
}
});
});
$(function() {
$('#datepicker2').datepicker( {
changeMonth: true,
changeYear: false,
showButtonPanel: true,
dateFormat: 'MM',
showAnim: '',
beforeShow: function( input, inst){
$(inst.dpDiv).addClass('just-month');
},
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
$(this).datepicker('setDate', new Date(month, 1));
$(inst.dpDiv).removeClass('just-month');
}
});
});