Value of MVC DateTimePicker sometimes null when setting via JavaScript

[Chris]

I have a UI where I am allowing the filtering of date by DateTime range. I have followed the example in the Kendo UI Demo to ensure that the range is enforced. What I am attempting to do is add a "Reset" button to this UI that will reset the values of the DateTimePicker's to the default range. I have researched and read multiple articles/posts, and I am still unable to resolve my issue. I can't seem to pinpoint why this is happening, but most of the time, the value of the DateTimePicker after calling .value() is null.

Here is my code:

 

function resetDateTimePickersToDefaultDateTimeRange() {

    var currentDate = new Date(),
        yesterdayDate = new Date(),
        dateTimeFormat = 'MM/dd/yyyy hh:mm tt';

    yesterdayDate.setDate(yesterdayDate.getDate() - 1);

    var $startDateTimePicker = $('#StartDateTimePicker').data('kendoDateTimePicker');
    var $endDateTimePicker = $('#EndDateTimePicker').data('kendoDateTimePicker');

    $endDateTimePicker.value(kendo.toString(currentDate, dateTimeFormat));
    $endDateTimePicker.trigger('change');

    $startDateTimePicker.value(kendo.toString(yesterdayDate, dateTimeFormat));

    $startDateTimePicker.trigger('change');

}

And just for completeness, here are the change events I have wired up for each of the DateTimePicker's:

function kendoStartDateTimePickerChange() {
    var endPicker = $('#EndDateTimePicker').data('kendoDateTimePicker'),
        startDate = $('#StartDateTimePicker').data('kendoDateTimePicker').value();

    if (startDate) {
        startDate = new Date(startDate);
        startDate.setDate(startDate.getDate() + 1);
        endPicker.min(startDate);
    }
}

function kendoEndDateTimePickerChange() {
    var startPicker = $('#StartDateTimePicker').data('kendoDateTimePicker'),
        endDate = $('#EndDateTimePicker').data('kendoDateTimePicker').value();

    if (endDate) {
        endDate = new Date(endDate);
        endDate.setDate(endDate.getDate() - 1);
        startPicker.max(endDate);

        if (endDate < startPicker.value()) {
            startPicker.value(endDate);
        }
    }
}

And here is where I am calling the reset() function:

$('#ResetFilterButton').click(function () {
    $('#FilterByInput').val('');
    resetDateTimePickersToDefaultDateTimeRange();

    populateGrid($('#StartDateTimePicker').val(), $('#EndDateTimePicker').val(), $('#FilterByInput').val());
});

[Chris]

This is the MVC Helper code I am using:

@Html.Kendo().DateTimePicker().Name("StartDateTimePicker").HtmlAttributes(new {@class = "form-control", required = "required", validationMessage = "Required"}).Value(Model.StartDateTime).Events(events => { events.Change("kendoStartDateTimePickerChange"); }).Max(DateTime.Now).Deferred()

[Konstantin Dikov]

Hello Chris,

I have tested the code snippets locally and I was not able to observe the issue in question. Can you please elaborate at which point you are getting the null value? 

Following is the example that I have tested:

<input type="button" id="ResetFilterButton" name="name" value="reset" />

@(Html.Kendo().DateTimePicker()
.Events(ev=>ev.Change("kendoStartDateTimePickerChange"))
   .Name("StartDateTimePicker")
   .HtmlAttributes(new {@class = "form-control", required = "required", validationMessage = "Required"})
   .Max(DateTime.Now))

@(Html.Kendo().DateTimePicker()
   .Name("EndDateTimePicker")
   .Events(ev=>ev.Change("kendoStartDateTimePickerChange"))
   .HtmlAttributes(new {@class = "form-control", required = "required", validationMessage = "Required"})
   .Max(DateTime.Now))

<script>
    $('#ResetFilterButton').click(function () {
        resetDateTimePickersToDefaultDateTimeRange();
    });

    function resetDateTimePickersToDefaultDateTimeRange() {

        var currentDate = new Date(),
            yesterdayDate = new Date(),
            dateTimeFormat = 'MM/dd/yyyy hh:mm tt';

        yesterdayDate.setDate(yesterdayDate.getDate() - 1);

        var $startDateTimePicker = $('#StartDateTimePicker').data('kendoDateTimePicker');
        var $endDateTimePicker = $('#EndDateTimePicker').data('kendoDateTimePicker');

        $endDateTimePicker.value(kendo.toString(currentDate, dateTimeFormat));
        $endDateTimePicker.trigger('change');

        $startDateTimePicker.value(kendo.toString(yesterdayDate, dateTimeFormat));

        $startDateTimePicker.trigger('change');

    }

    function kendoStartDateTimePickerChange() {
        var endPicker = $('#EndDateTimePicker').data('kendoDateTimePicker'),
            startDate = $('#StartDateTimePicker').data('kendoDateTimePicker').value();

        if (startDate) {
            startDate = new Date(startDate);
            startDate.setDate(startDate.getDate() + 1);
            endPicker.min(startDate);
        }
    }

    function kendoEndDateTimePickerChange() {
        var startPicker = $('#StartDateTimePicker').data('kendoDateTimePicker'),
            endDate = $('#EndDateTimePicker').data('kendoDateTimePicker').value();

        if (endDate) {
            endDate = new Date(endDate);
            endDate.setDate(endDate.getDate() - 1);
            startPicker.max(endDate);

            if (endDate < startPicker.value()) {
                startPicker.value(endDate);
            }
        }
    }
</script>

Looking forward to your reply.


Regards,
Konstantin Dikov
Telerik by Progress

[Chris]

Konstantin,

The value is null when selecting it inside of the change events. After setting it then triggering the event, the following line returns null:

endDate = $('#EndDateTimePicker').data('kendoDateTimePicker').value();

[Angel Petrov]

Hi,

Actually in the code that Konstantin provided the kendoStartDateTimePickerChange was attached for the end date picker. After modifying the code and testing it all seemed to work correctly as you can verify from this video.

Can you please let us know with what version of Kendo you are testing? If it is not the latest please upgrade and test the project again. If the issue continuous to reproduce I would kindly like to ask you to open a formal support ticket and attach a small runnable sample in which it can be observed.

Regards,
Angel Petrov
Telerik by Progress