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.

Answer 2

Make your changes from within the success/error handlers and try to enable all the dates before disabling:

function disableDates() {

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

    $.ajax({  
        url: 'partners/getInactiveDays',
        dataType: 'json',
        async: false,
        success: function(data) {
            $.each(data.days, function(i, d) {
                disabledDays.push(parseInt(d.Day.id));
            });

            picker.set('enable', true);
            picker.set('disable', disabledDays);
        },
        error: function() {
            picker.set('disable', true);
        }
    });
}

Answer 3

¿Are you sure your ajax request is being called?

Some old, annoying, deprecated, not fully-functional browsers (yes, IE, I'm talking about you) would store ajax request in cache and return the first result in every subsequent request. As you have not marked your request as POST, it's possible partners/getInactiveDays is really only being called once.

Add method: 'POST' to your request, or append a random string (even POST request were sometimes stored in IE8) to your url as an unusued parameter (e.g. url:'partnets/getInactiveDays?randomizer='+new Date().getTime()) to prevent cache storing if they are not being excecuted.

Answer 4

I know this is too late to answer, but just to share how I solved it. I just set the enable to true before the disable. Like so:

timePicker.set('enable', true)
timePicker.set('disable', disabledDays)