This is a migrated thread and some comments may be shown as answers.

Value of MVC DateTimePicker sometimes null when setting via JavaScript

4 Answers 1355 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 2
Chris asked on 30 Sep 2016, 12:48 PM
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());
});

4 Answers, 1 is accepted

Sort by
0
Chris
Top achievements
Rank 2
answered on 30 Sep 2016, 12:52 PM

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

0
Konstantin Dikov
Telerik team
answered on 04 Oct 2016, 10:29 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Chris
Top achievements
Rank 2
answered on 04 Oct 2016, 12:41 PM

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();

0
Angel Petrov
Telerik team
answered on 06 Oct 2016, 11:16 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Date/Time Pickers
Asked by
Chris
Top achievements
Rank 2
Answers by
Chris
Top achievements
Rank 2
Konstantin Dikov
Telerik team
Angel Petrov
Telerik team
Share this question
or