Restrict month view in month-year datepicker

Question

I'm using jQuery month and year picker (I'm hiding the day part of the datepicker).

In this calendar I need to show the Jan, Mar, April and Sep month only in the month selection. Is there any built-in method for that ?

$('.datepicker_month_year').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'M yy',
    beforeShow: function (input, inst) {
        $(inst.dpDiv).addClass('calendar-off');
    },
    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));
    }
});

Please refer this link keith-wood.name/datepickRef.html#showMonth or kelvinluck.com/assets/jquery/datePicker/v2/demo/…. May be its help you. — krutssss

Irvin Dominin Irvin Dominin · Accepted Answer · 2014-01-01T12:34:53

You can consider to check in the beforeShowDay the presence of the displayed month in a previously loaded array.

Code:

monthArray = [0, 2, 3, 8]

$(function () {
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'M yy',
        beforeShowDay: function (date) {
            //getMonth()  is 0 based
            if ($.inArray(date.getMonth(), monthArray) > -1) {
                return [true, ''];
            }
            return [false, ''];
        }
    });

});

Demo: http://jsfiddle.net/IrvinDominin/4Vz6b/

EDIT

You are displaying with a css hack only month an year, and in this case you want to restrict the displaying of the months.

The first solution woks if you display the days, but it's not the case.

You can consider to hide the not allowed option from the select with the class .ui-datepicker-month, considering that there is any afterShow event (or something similar) I used the focus event. In the function I check that the month displayed is in the allowed list.

Code:

monthArray = [0, 2, 3, 8]

$(function () {
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'M yy',
        beforeShow: function (input, inst) {
            $(inst.dpDiv).addClass('calendar-off');
        },
        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));
        }
    }).focus(function () {
        $($.grep($("select.ui-datepicker-month option"),

        function (n, i) {
            return $.inArray(parseInt(n.value, 10), monthArray) > -1 ? false : true;
        })).hide()
    });;
});

Demo: http://jsfiddle.net/IrvinDominin/Q3f29/

Restrict month view in month-year datepicker

1 Answers

EDIT