Dynamically update min value from previously selected DateTimePicker value

4 posts, 0 answers
  1. Timothy
    Timothy avatar
    9 posts
    Member since:
    Jun 2014

    Posted 08 Jun Link to this post

    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

  2. Timothy
    Timothy avatar
    9 posts
    Member since:
    Jun 2014

    Posted 08 Jun in reply to Timothy Link to this post

    To clarify further, i is the value of a razor variable which is set in a for loop.  
  3. Timothy
    Timothy avatar
    9 posts
    Member since:
    Jun 2014

    Posted 08 Jun Link to this post

    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;
        }
    }
  4. Timothy
    Timothy avatar
    9 posts
    Member since:
    Jun 2014

    Posted 09 Jun Link to this post

    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)
        }
    }

     

     

Back to Top