Datepicker Hide PrevNext Button

Datepicker Hide PrevNext Button

by Hilarius Doren

HTML

<input type="text" name="txtMonth" id="txtMonth" class="date-picker-month"/>
<input type="text" name="txtFromYear" id="txtYear" class="date-picker-year"/>

CSS

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

JavaScript

$(function() {
    $('.date-picker-month').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM',
        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));
        }
    });
	$(".date-picker-month").focus(function () {
        $(".ui-datepicker-year").hide();
    });
});
$(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();
    });
});