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.

Razor

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

C#

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

C#

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

• ASP.NET Core DateRangePicker Documentation

• ASP.NET Core DateRangePicker Demos

• ASP.NET Core DateRangePicker Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the DateRangePicker for ASP.NET Core
• Server-Side API Reference of the DateRangePicker for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base