How to refresh datetimepicker properly (for a dynamic hourMin hourMax setup)?

[expert2000]

trafficstars

I have a problem with dynamic population of datetimepicker with avaliable days, and hour related to chosen day. I`m using ajax call with onSelect event to set the properties. Everything is correct when I close datepicker with mouse and reopen it, but i want to reload hour and minutes widhout reopening it. My code is posted above

$(document).ready(function(){
var d = new Date();
        var year = d.getFullYear();

        $.ajax({
            url: '@Url.Action("GetDaysByRoomId")',
            type: "POST",
            data: { id: '@Model.roomId' },
            success: function(data) {
                daysArray = data;
                $('#dateOfStudy').datetimepicker({
                    monthNames: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
                    monthNamesShort: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'],
                    dayNames: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
                    dayNamesShort: ['Nd','Pn','Wt','Śr','Cz','Pt','So'],
                    timeText: "Wizyta:",
                    hourText: "Godzina",
                    minuteText: "Minuta",
                    closeText: "Zatwierdź",
                    currentText: "Wstaw aktualną datę",
                    dateFormat: 'yy-mm-dd',
                    timeFormat: 'HH:mm',
                    stepMinute: 5,
                    addSliderAccess: true,
                    sliderAccessArgs: { touchonly: false },
                    controlType: 'select',
                    showButtonPanel: false,
                    separator: ' ',
                    minDate: new Date(year, 1 - 1, 1),
                    hourMin: 7,
                    hourMax: 15,
                    onSelect: function(date, instance) {
                        onSelectDatepicker(date, instance);
                    },
                    beforeShowDay: function(day) {
                        var day = day.getDay();
                        var daysWorkingArr = data;
                        if (jQuery.inArray(day, daysWorkingArr) == -1) {
                            return [true, ""];
                        } else {
                            return [false, ""];
                        }
                    }
                });
            },
            error: function() {
                $('#dateOfStudy').datetimepicker({
                    monthNames: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
                    monthNamesShort: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'],
                    dayNames: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
                    dayNamesShort: ['Nd','Pn','Wt','Śr','Cz','Pt','So'],
                    timeText: "Wizyta:",
                    hourText: "Godzina",
                    minuteText: "Minuta",
                    closeText: "Zatwierdź",
                    currentText: "Wstaw aktualną datę",
                    dateFormat: 'yy-mm-dd',
                    timeFormat: 'HH:mm',
                    stepMinute: 5,
                    addSliderAccess: true,
                    sliderAccessArgs: { touchonly: false },
                    controlType: 'select',
                    showButtonPanel: false,
                    separator: ' ',
                    minDate: new Date(year, 1 - 1, 1),
                    hourMin: 7,
                    hourMax:17
                }); 
            }
        });
);

function onSelectDatepicker(date, instance) {
        var d = new Date();
        var year = d.getFullYear();
       var datepicker = instance;
        $.ajax({
            url: '@Url.Action("GetHoursByRoomIdDayNo")',
                            type: 'POST',
                            data:{roomId: '@Model.roomId', date: date },
                            async: false,
                            success: function(result) {
                                var start = result['TimeOfStart'];
                                var stop = result['TimeOfStop'];

                                /*$('#dateOfStudy').datetimepicker('option', {hourMin: start});
                                $('#dateOfStudy').datetimepicker('option', {hourMax: stop});*/
                                $('#dateOfStudy').datetimepicker('destroy');

                                $('#dateOfStudy').datetimepicker({
                                    monthNames: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
                                    monthNamesShort: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'],
                                    dayNames: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
                                    dayNamesShort: ['Nd','Pn','Wt','Śr','Cz','Pt','So'],
                                    timeText: "Wizyta:",
                                    hourText: "Godzina",
                                    minuteText: "Minuta",
                                    closeText: "Zatwierdź",
                                    currentText: "Wstaw aktualną datę",
                                    dateFormat: 'yy-mm-dd',
                                    timeFormat: 'HH:mm',
                                    stepMinute: 5,
                                    addSliderAccess: true,
                                    sliderAccessArgs: { touchonly: false },
                                    controlType: 'select',
                                    showButtonPanel: false,
                                    separator: ' ',
                                    minDate: new Date(year, 1 - 1, 1),
                                    hourMin: result['TimeOfStart'],
                                    hourMax: result['TimeOfStop'],
                                    showHour: result['TimeOfStart'],
                                    defaultDate: date,
                                    beforeShowDay: function(day) {
                                        var day = day.getDay();
                                        var daysWorkingArr = daysArray;
                                        if (jQuery.inArray(day, daysWorkingArr) == -1) {
                                            return [true, ""];
                                        } else {
                                            return [false, ""];
                                        }
                                    },
                                    onSelect: function(date, instance) {
                                        onSelectDatepicker(date, instance);
                                    }  
                                });

                                $('#dateOfStudy').datetimepicker('refresh');
                                $('#dateOfStudy').datetimepicker("hide");
                                $('#dateOfStudy').datetimepicker('show');


                            }
                        });
    }

The problem is I do not see any result of lines posted above.

$('#dateOfStudy').datetimepicker('refresh');
$('#dateOfStudy').datetimepicker("hide");
$('#dateOfStudy').datetimepicker('show');

As you see Ive commented those lines in OnSelectDatepicker function cause Ive tried another approach with setting an options by:

$('#dateOfStudy').datetimepicker('option', {hourMin: start});
$('#dateOfStudy').datetimepicker('option', {hourMax: stop});

but again... without any success. Any help would be apperciated.

[ghost]

Yes, such requirements (dynamically updating hours based on selected date) have now become common.

Consider a case where a company has working hours and these would normally vary between weekdays and weekends. A user should be given limited hour range for selection.

Can we expect to see this in future release of this plugin?

Thanks in advance.

[NinkevdVeen]

Have there been new insights or updates regarding this issue?

Changing an option within the onSelect closes the picker early(, which is unwanted): dtpElement.datetimepicker('option', {hourMin:8, hourMax:17}); On opening the picker again I cannot choose before 8 or after 17, which is good, but the options are still visible in the drop down. When clicked the time reverts to a possible time instead.

I would like selectable hours and minutes to be variable based on what I tell it in the onSelect or perhaps in a onSelectDay... Is this possible in some other manner?

Thanks in advance.