disabledTimeIntervals in datetimepicker not worked when set the option after initialize

Question

I use bootstrap datetimepicker to build my date & time picker.

I make my time picker as following in initialize of page:

$('#PickupTime').datetimepicker({
    locale: 'en',
    format: 'hh:mm A',
    stepping: 30,
});

I want to set time picker min & max time depending on data return from integration.

$.ajax({
    url: url,
    data: data,
    method: 'post',
    success: function (result) {
        debugger;
        $('#PickupTime').datetimepicker({
            disabledTimeIntervals: [[moment().hour(0), moment().hour(8).minutes(30)], [moment().hour(20).minutes(30), moment().hour(24)]],               
        });    

    },
});

but I noted that disabledTimeIntervals did not work, the disabledTimeIntervals only works when I put it in initialize function.

Answer 1

You have to use disabledTimeIntervals function instead of disabledTimeIntervals option.

Note that, as docs say:

All functions are accessed via the data attribute e.g. $('#datetimepicker').data("DateTimePicker").FUNCTION()

Your code will be:

$.ajax({
    url: url,
    data: data,
    method: 'post',
    success: function (result) {
        debugger;
        $('#PickupTime').data("DateTimePicker").disabledTimeIntervals([
            [moment().hour(0), moment().hour(8).minutes(30)],
            [moment().hour(20).minutes(30), moment().hour(24)]             
        ]});
    },
});