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() {
    $(         


        

Answer 1

¿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 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

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.