Allow datepicker to show only specific month

Question

I'm trying to crate a datepicker from jQuery.

Users will allow to choose only June to September in each year from 2016-2020. (So I don't think minDate and maxDate will work here)

I tried using the "beforeShowDay" as mentioned in Disable specific months JqueryUI datepicker

The code was successfully disable users from picking the date outside from June to September but they can still choose January-December from the month dropdownlist (of datepicker).

What I want to do is limit the datepicker month-drop-down-list to show only June to September.

$(document).ready(function() {


           $("#datepicker").datepicker({
           changeMonth: true,
           changeYear: true,
           yearRange:'2016:2020',
           minDate:0,
           beforeShowDay: disableSpecificWeekDays

        });     


        var monthsToDisable = [0,1,2,3,4,9,10,11];
        var endMonth=[8];
        function disableSpecificWeekDays(date) {
            var month = date.getMonth();


            if ($.inArray(month, monthsToDisable) !== -1) {
                return [false];
            }
            return [true];
        }
        $("#datepicker").datepicker("setDate",'06/01/2016');
    });

Chris Chris · Accepted Answer · 2015-10-19T01:51:01

I don't see any options that would allow you to adjust this. I have a hacky solution that will probably do the job for most use cases, but that's your call. What I have done here is remove the unwanted select items from the datepicker list each time it gets updated. I had to add a short delay as jQuery UI takes a second to generate its code.

var removeDisabledMonths = function() {
    setTimeout(function() {

        var monthsToDisable = [0,1,2,3,4,9,10,11];

        $.each(monthsToDisable, function(k, month) {
            var i = $('#ui-datepicker-div select.ui-datepicker-month').find('option[value="'+month+'"]').remove();
        });

    }, 100);
};

//datepicker
$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange:'2016:2020',
    minDate:0,
    beforeShowDay: disableSpecificWeekDays,

    // Added this --
    onChangeMonthYear: function(year, month, obj) {
        removeDisabledMonths();
    }
}); 

//initial hide
setTimeout(function() {
    removeDisabledMonths();
}, 1000);

Note that I had to call the function with a 1 second delay after the datepicker was initialized in order to get the months to hide the first time. Hacky, but if you are only looking to adjust the UI for the user, it just may do the job.

Allow datepicker to show only specific month

3 Answers