Setting disable times dynamically with arrays does not clear previous disabled times

[wahablukman]

im trying to do dynamic time disabling, here is what i have

var allUserSchedules = [
    ["26 December, 2017", {from: [00,00], to: [01,00]}],
    ["29 December, 2017", {from: [16,00], to: [19,00]}]
];

var timePickerInput = $('#bookingTime').pickatime();

$('#bookingDate').on('change', function() {
    var timePicker = timePickerInput.pickatime('picker');
    var timeSlotTaken = [];
    var generateDate;
    generateDate = $('#bookingDate').val();
    for (i = 0; i < allUserSchedules.length; i++) { 
        if (generateDate == allUserSchedules[i][0]) {
            timeSlotTaken.push(allUserSchedules[i][1]);
        }
    }

    console.log(timeSlotTaken);
    $('#bookingTime').show();
    timePicker.set('disable', timeSlotTaken);
    timePicker.set('interval', 60);
});

The flow is, user picks a date -> JS checks if there are same dates between input date and dates inside arrays and return those same dates -> from those same dates get the time slot taken

It is working as expected when i FIRST select a date, however, the next times i do it, the time slots taken from the first selected date is also there, it does not refresh. Anyone has experienced this before or has a solution to this issue ?

[shazzygh]

Hey I have run into the same situation using the datepicker and was able to solve it by first setting datePicker.set('disable', true); to disable all dates and then setting my available dates, maybe this would work for the timepicker as well?

[kkrieger85]

@wahablukman @shazzygh You could use the datepicker events.