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

Initial Range no Shown

3 Answers 13 Views
DateRangePicker
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 05 May 2020, 01:13 PM

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

3 Answers, 1 is accepted

Sort by
0
Accepted
Viktor Tachev
Telerik team
answered on 08 May 2020, 01:12 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 08 May 2020, 05:42 PM

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);
});
0
Viktor Tachev
Telerik team
answered on 13 May 2020, 11:19 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
DateRangePicker
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Viktor Tachev
Telerik team
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Share this question
or