jQuery UI DatePicker to show year only
**NOTE :
**If anyone have objection that "why i have answered this Question now !" Because i tried all the answers of this post and got no any solution.So i tried my way and got Solution So i am Sharing to next comers****
HTML
<label for="startYear"> Start Year: </label>
<input name="startYear" id="startYear" class="date-picker-year" />
jQuery
<script type="text/javascript">
$(function() {
$('.date-picker-year').datepicker({
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy',
onClose: function(dateText, inst) {
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, 1));
}
});
$(".date-picker-year").focus(function () {
$(".ui-datepicker-month").hide();
});
});
</script>
$(function() {
$('#datepicker1').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: 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));
}
});
});
Style should be
.ui-datepicker-calendar {
display: none;
}
working demo