Bind DateRangePicker to Model Value and POST to Controller

Environment

Product

DateRangePicker for Progress® Telerik® UI for ASP.NET Core, DateRangePicker for Progress® Telerik® UI for ASP.NET MVC

Description

How can I show (bind) a model value in the DateRangePicker and submit it in a POST to a controller action?

Solution

• To show the dates from the model in the DateRangePicker, configure the .Range(r => r.Start().End()).
• To submit the POST data, use the StartField and EndField settings of the DateRangePicker to set the names of the fields that are used in the query.

These two settings are needed because the DateRangePicker consists of two actual inputs.

@model MyViewModel

<form method="post" action="/home/index">

    @(Html.Kendo().DateRangePicker()
                     .Name("myDateRangePicker")
                     //model fields for POST data
                     .StartField(nameof(Model.TheStartTime))
                     .EndField(nameof(Model.TheEndTime))
                     //current range values to be displayed
                     .Range(r => r.Start(Model.TheStartTime).End(Model.TheEndTime))
    )

    <input type="submit" value="make a change in the range and click me" />
</form>

public class MyViewModel
{
    public DateTime TheStartTime { get; set; }
    public DateTime TheEndTime { get; set; }
}

public IActionResult Index()
{
    MyViewModel mdl = new MyViewModel { TheStartTime = DateTime.Now.AddDays(-2), TheEndTime = DateTime.Now.AddDays(2) };
    return View(mdl);
}

[HttpPost]
public IActionResult Index(MyViewModel theUserInput)
{
    return View(theUserInput);//just return to the current view with the new data
}