not able to Change a datetimepicker on change of another datetimepicker

[Nitin]

Hi,

I have 2 date pickers-

<div class=""><kendo-datepicker name="Input.ReviewStartDateTime" start="CalendarView.Month" depth="CalendarView.Year" format="yyyy/MM/dd" value="DateTime.Now" on-change="endChange"/> </div>

<div><kendo-datepicker name="Input.ReviewEndDateTime"  start="CalendarView.Month" depth="CalendarView.Year" format="yyyy/MM/dd" value="DateTime.Now" /></div>      

 

I am trying to change the value of Input.ReviewEndDateTime  picker to + 60 days  on change Input.ReviewStartDateTime picker -

        function endChange() {
            var startDatePicker = $("#Input.ReviewStartDateTime").data("kendoDatePicker"),
                startDate = this.value();
            console.log(startDate);
            if (startDate) {
                var endDate = new Date(startDate.getMonth() + 2);

                var endatepicker = $("#Input.ReviewEndDateTime").data("kendoDatePicker");
                endatepicker.value(startDate);
                endatepicker.trigger("change");
            }
        }

but I get the following error- 

Uncaught TypeError: Cannot read property 'value' of undefined

 

How can I change the date picker to 60 dates after theselected date from Input.ReviewStartDateTime

[Stefan]

Hello, Nitin,

Thank you for the provided code.

The issue occurs because there is "."(dot) inside the name(ID) of the element and it has to be escaped in order to be selected correctly by jQuery as the dot is using reserved for the class selectors:

startDatePicker = $("#Input\\.ReviewStartDateTime").data("kendoDatePicker"),

I can also suggest using the setMonth method to set the new month for the end date.

This is the modified end result:

<kendo-datepicker name="Input.ReviewStartDateTime"  format="yyyy/MM/dd" value="DateTime.Now" on-change="endChange" />

 <kendo-datepicker name="Input.ReviewEndDateTime"   format="yyyy/MM/dd" value="DateTime.Now" />

<script>

    function endChange() {
        var startDatePicker = $("#Input\\.ReviewStartDateTime").data("kendoDatePicker"),
            startDate = this.value();
        if (startDate) {
            var endDate = new Date(startDate);
            endDate.setMonth(endDate.getMonth() + 2);
            var endatepicker = $("#Input\\.ReviewEndDateTime").data("kendoDatePicker");

            endatepicker.value(endDate);
            endatepicker.trigger("change");
        }
    }
</script>

I hope this is helpful.


Regards,
Stefan
Progress Telerik