Value of MVC DateTimePicker sometimes null when setting via JavaScript

5 posts, 0 answers
  1. Chris
    Chris avatar
    8 posts
    Member since:
    Jul 2015

    Posted 30 Sep Link to this post

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

  2. Chris
    Chris avatar
    8 posts
    Member since:
    Jul 2015

    Posted 30 Sep in reply to Chris Link to this post

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

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 04 Oct Link to this post

    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
  5. Chris
    Chris avatar
    8 posts
    Member since:
    Jul 2015

    Posted 04 Oct in reply to Konstantin Dikov Link to this post

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

  6. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 06 Oct Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready