Dynamically update min value from previously selected DateTimePicker value

[Timothy]

I have a razor view that contains dynamically created DateTimePickers based on a value of a NumericTextBox.  These are created for each section on the view.  I have 41 sections that can contain 1 or more DateTimePickers.  What I want to do is for all DateTimePickers that are created (whether in the current section (div) or future sections) to only allow the option of choosing a time that is the interval amount after the previous chosen date/time.  

Here is the Javascript that contains the dynamically created DateTimePicker...

function showSectionDiv(e, i) {
            var numerictextbox = document.getElementById("section_" + i);
            var divSection = document.getElementById("setSection_" + i);

            if (numerictextbox.value == 0) alert("Please select a value...");

            for (var a = 0; a < numerictextbox.value; a++) {
                // Insert Kendo date/time control
                divSection.innerHTML += '<div>' + (a + 1) + '- <input type="text" name="dateTimePicker_' + i + '_' + a + '" id="dateTimePicker_' + i + '_' + a +'" min="'+ minimumDate + '">';
            }
            for (var b = 0; b < numerictextbox.value; b++) {
                var nextMinimumDate = new Date(minimumDate.getFullYear(), minimumDate.getMonth(), minimumDate.getDate(), minimumDate.getHours(), (minimumDate.getMinutes() + (15)), 0, 0)
                var c = (b < numerictextbox.value) ? b + 1 : b;
                var dtp = $("#dateTimePicker_" + i + "_" + b).kendoDateTimePicker({
                    dateInput: true,
                    interval: 15,
                    open: function (e) {
                        dtp.min(anotherDate);
                    }
                }).data("kendoDateTimePicker")
            }
        }

 

Thanks,

Tim

[Timothy]

To clarify further, i is the value of a razor variable which is set in a for loop.  

[Timothy]

Found a solution.  Just need to round up the times to the nearest quarter hour now.  

Here's my code if anyone runs in to a similar problem:

function showSectionDiv(e, i) {
    var numerictextbox = document.getElementById("section_" + i);
    var divSection = document.getElementById("setSection_" + i);
    var interval = 15;

    if (numerictextbox.value == 0) alert("Please select a value...");

    for (var a = 0; a < numerictextbox.value; a++) {
        // Insert Kendo date/time control
        divSection.innerHTML += '<div>' + (a + 1) + '- <input type="text" name="dateTimePicker_' + i + '_' + a + '" id="dateTimePicker_' + i + '_' + a +'" min="'+ minimumDate + '">';
    }
    for (var b = 0; b < numerictextbox.value; b++) {
        var minimumDate = new Date(currentDate);
        nextDate = new Date(minimumDate.getFullYear(), minimumDate.getMonth(), minimumDate.getDate(), minimumDate.getHours(), (minimumDate.getMinutes() + (interval)), 0, 0)
        alert(nextDate);
        var dtp = $("#dateTimePicker_" + i + "_" + b).kendoDateTimePicker({
            dateInput: true,
            interval: interval,
            min: nextDate,
            value: nextDate
        }).data("kendoDateTimePicker")
        interval = interval + 15;
    }
}

[Timothy]

Final solution that will work as long as previously set DateTimePickers are not changed.  You'll need to add logic to get the max DateTime if you need to change a previous control and then have that change cascade through.

function showSectionDiv(e, i) {
    var numerictextbox = document.getElementById("section_" + i);
    var divSection = document.getElementById("setSection_" + i);

    if (numerictextbox.value == 0) alert("Please select a value...");

    for (var a = 0; a < numerictextbox.value; a++) {
        // Insert Kendo date/time control
        divSection.innerHTML += '<div>' + (a + 1) + '- <input type="text" name="dateTimePicker_' + i + '_' + a + '" id="dateTimePicker_' + i + '_' + a +'" min="'+ currentDate + '">';
    }
    for (var b = 0; b < numerictextbox.value; b++) {
        var dtp = $("#dateTimePicker_" + i + "_" + b).kendoDateTimePicker({
            dateInput: true,
            interval: interval,
            min: nextDate,
            value: nextDate,
            change: function (e) {
                nextDate = new Date(dtp.value().getFullYear(), dtp.value().getMonth(), dtp.value().getDate(), dtp.value().getHours(), (dtp.value().getMinutes() + (interval)), 0, 0);
            }
        }).data("kendoDateTimePicker")
        dtp.bind("open", function (e) {
            dtp.setOptions({
                value: nextDate
            })
        });
        nextDate = new Date(dtp.value().getFullYear(), dtp.value().getMonth(), dtp.value().getDate(), dtp.value().getHours(), (dtp.value().getMinutes() + (interval)), 0, 0)
    }
}