Initial Range no Shown

[Joel]

When given a legit value on startup, value is not represented.

DateRangePicker:

<div class="col-sm-6">
    <h6>Date Filter:</h6>

    @(Html.Kendo().DateRangePicker()
        .Name("daterangepicker")
        .HtmlAttributes(new { style = "width: 100%" })
        .Events(e => e.Change("onDateRangeChange")))
</div>

Form Fields:

<form>
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" id="customerId" asp-for="CustomerId" />
    <input type="hidden" id="customerUniqueId" asp-for="CustomerUniqueId" />
    <input type="hidden" id="groupId" asp-for="GroupId" />
    <input type="hidden" id="personId" asp-for="PersonId" />
    <input type="hidden" id="startDate" asp-for="StartDate" />
    <input type="hidden" id="endDate" asp-for="EndDate" />
</form>

Initialize Script:

$(document).ready(function() {

    var startDate = $("#startDate").val();
    var endDate = $("#endDate").val();

    alert(startDate == null);
    alert(endDate == null);

    alert("Start - " + startDate);
    alert("End - " + endDate);

    var dateRangePicker = $("#daterangepicker").data("kendoDateRangePicker");

    var range = {
        start: startDate,
        end: endDate
    };

    dateRangePicker.range(range);
    //dateRangePicker.dateView._current = startDate;

    //alert("Start - " + dateRangePicker.range().start);
    //alert("End - " + dateRangePicker.range().end);
});

Controller:

model.StartDate = DateTime.Today.Date.AddDays(-10);
model.EndDate = DateTime.Today.Date.AddDays(5);

[Viktor Tachev]

Hello Joel,

 

In order to set the initial values for the DateRangePicker you can use the Range.Start and End properties. Like in the following example:

https://demos.telerik.com/aspnet-core/daterangepicker/date-range

 

The code on your end would look similar to the one below. Just ensure that the model is returned to the View.

        @(Html.Kendo().DateRangePicker()
            .Name("daterangepicker")
            .Range(r => r.Start(Model.StartDate).End(Model.EndDate))
            .Events(e => e.Change("onDateRangeChange"))
        )

 

Give the modification a try and let me know how it works for you.

 

Regards,
Viktor Tachev
Progress Telerik

[Joel]

This worked.  I have updated the control definition to look like this:

@(Html.Kendo().DateRangePicker()
    .Name("daterangepicker")
    .HtmlAttributes(new { style = "width: 100%" })
    .Range(r => r.Start(Model.StartDate).End(Model.EndDate))
    .Events(e => e.Change("onDateRangeChange")))

 

I'm confused as to why this script (what I had) wouldn't do the same thing:

$(document).ready(function() {

    var startDate = $("#startDate").val();
    var endDate = $("#endDate").val();

    alert(startDate == null);
    alert(endDate == null);

    alert("Start - " + startDate);
    alert("End - " + endDate);

    var dateRangePicker = $("#daterangepicker").data("kendoDateRangePicker");

    var range = {
        start: startDate,
        end: endDate
    };

    dateRangePicker.range(range);
    //dateRangePicker.dateView._current = startDate;

    //alert("Start - " + dateRangePicker.range().start);
    //alert("End - " + dateRangePicker.range().end);
});

[Viktor Tachev]

Hi Joel,

 

The DateRangePicker is initialized client-side using the document.ready() event as well. Thus, the settings are most likely not applied because the logic is executed too early and the settings are overridden.

For setting initial settings of the component I recommend using the server configuration. These settings will be serialized and applied to the client.

 

Regards,
Viktor Tachev
Progress Telerik