javascript - Disable dates in pickadate-picker and refresh it

Question

I try to disable some dates after I have initialised the Date Picker.

I am initialising the picker like this:

$( document ).ready(function() {
    $('#inputDatetime').pickadate({
        format: 'dd. mmmm yyyy',
        formatSubmit: 'yyyy-mm-dd',
        min: dt,
        selectYears: 2,
        selectMonths: true
    });
});

The user now performs some action that triggers an onChange() event. The disableDates() function prepares some more dates to disable and sets it to the picker using the set method:

function disableDates() {

    var disabledDays = [];

    $.ajax({  
        url: 'partners/getInactiveDays',
        dataType: 'json',
        async: false,
        success: function(data) {

            $.each(data.days, function(i, d) {
                disabledDays.push(parseInt(d.Day.id));
            });
        }
    });

    var $input = $('#inputDatetime').pickadate();
    var picker = $input.pickadate('picker');

    picker.set({
        disable: disabledDays
    });
}

Please note that in my case disableDays contains integers (reffering to weekdays) and dates according to the documentation (http://amsul.ca/pickadate.js/date/#disable-dates).

When the disableDates() function is triggered for the first time, it correctly disables the dates that I retrieved with AJAX. As soon as it is triggered a second time, the picker does not seem to be updated anymore. I guess the picker has to be rendered again somehow to reflect the changes. I tried to .stop() and .start() and .render(), without any effect.

How can I disable dates and refresh the picker correctly?

Answer 1

I couldn't let this go, so I've tested it quite extensively. In the end of the day, it works like it should. There is no need to stop, start or render it. The issue must be with your json-data, or the data in general (dates, ints).

I created two examples in jsfiddle, demonstrating that it does indeed work with the type of data you seem to be expecting.

I would advise you to log data.days, d.Day.id and finally disabledDays to console to check what they actually contain. If nothing else I hope you can have my fiddle examples as reference.

A note about the code though. The first time you initialize the picker you can assign it to a variable:

var myvar = $('#inputDatetime').pickadate({
    format: 'dd. mmmm yyyy',
    formatSubmit: 'yyyy-mm-dd',
    min: dt,
    selectYears: 2,
    selectMonths: true
});

And then, when you need to get this instance, you just do:

var picker = myvar.pickadate('picker');
picker.set('disable', [1,7]); //disables all saturdays & sundays

No need to reinitialize it in other words.

Also, a last note. Setting disabled dates doesn't clear previously set dates. You just keep adding to the collection of disabled dates, and when you use days you only have 1-7 to work with before everything is disabled.