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

Binding DateRangePicker to Model Value and Submitting POST to Controller


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


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


  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">

                     //model fields for POST data
                     //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" />
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);

public IActionResult 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