Jquery Month and Year Picker

jQuery-ui Month and Year Picker with the solution of 'non-clearing text problem'

by Intesar Haider

HTML

<label for="myDate">Date :</label>
<input name="myDate" class="monthYearPicker" />

CSS

.ui-datepicker-calendar {
    display: none;
 }

JavaScript

$(function() {
	$('.monthYearPicker').datepicker({
		changeMonth: true,
		changeYear: true,
		showButtonPanel: true,
		dateFormat: 'MM yy'
	}).focus(function() {
		var thisCalendar = $(this);
		$('.ui-datepicker-calendar').detach();
		$('.ui-datepicker-close').click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
		});
	}).onClosefunction (dateText, inst) {
    function isDonePressed() {
        return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
    }
    if (isDonePressed()){
        alert('done pressed');
    }
}
});