New to Telerik UI for ASP.NET Core? Download free 30-day trial

Binding DateRangePicker to Model Value and Submitting 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 request to a controller action?

Solution

  1. To show the dates from the model in the DateRangePicker, configure the .Range(r => r.Start().End()).
  2. 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 ActionResult Index()
{
    MyViewModel mdl = new MyViewModel { TheStartTime = DateTime.Now.AddDays(-2), TheEndTime = DateTime.Now.AddDays(2) };
    return View(mdl);
}

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

More ASP.NET Core DateRangePicker Resources

See Also

In this article