Jquery Month and Year Picker

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

by Sreekesh S K

HTML

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

CSS

.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker-current.ui-state-default.ui-priority-secondary.ui-corner-all:nth-child(1){display: none;}

JavaScript

$(function() {
	$( "#datepicker" ).datepicker({
  showButtonPanel: true,
   closeText: "Close",
    beforeShow: function( input ) {
        setTimeout(function() {
            var headerPane = $( input )
            .datepicker( "widget" )
            .find( ".ui-datepicker-header" );

            $( "<button>", {
                text: "X",
                click: function() {
                  $('#ui-datepicker-div .ui-datepicker-close').click();
                }
            }).appendTo( headerPane );
        }, 1 );
    }
});
});