How to overwrite datetimepicker enabledHours after initial load?

Question

On page load I initialized datetimepicker to this:

$('#txtdate').datetimepicker({
    inline: true,
    sideBySide: true,
    maxDate: someDate,
    minDate: curentDate,
    enabledHours: HoursArray(CurrentDayOpenTime, CurrentDayCloseTime)
});

but on new date selection I want to update/overwrite enabledHours (because on new date enabledHours are different) using below function.

$(document).on('dp.change', manipulateTime);

//function////

function manipulateTime(td){
    if (!td.date.isSame(td.oldDate, "day")) {
        $('#txtdate').datetimepicker({
            inline: true,
            sideBySide: true,
            maxDate: SomeCloseDate,
            minDate: SelectedDayOpenTime,
            enabledHours: HoursArray(SelectedDayOpenTime, SelectedDayCloseTime)
        });
    }
}

I couldn't able to overwrite the previous enabledHours. It always shows enabled hours which is generated on page load.

Can someone help me on this?

Answer 1

You can try the below code to change enabledHours:

$(document).on('dp.change', manipulateTime);

function manipulateTime(td){
   //Your code.... 
   $('#txtdate').data('DateTimePicker').enabledHours([21,22,23]); //change the array of enabled hours here
}