Render DateRangePickerFor
28 Mar 20222 minutes to read
The DateRangePickerFor component can be rendered by passing value from the model. The selected date range value can be retrieved during form submission using the post method at the server end.
@model EJ2CoreSampleBrowser.Controllers.DateRangePicker
<form method="post">
<ejs-daterangepicker id="daterangepickerFor" ejs-for="@Model.value"></ejs-daterangepicker>
<div id="errorMessage">
<span asp-validation-for="value"></span>
</div>
<div id="submitbutton">
<ejs-button id="submitButton" content="Submit"></ejs-button>
</div>
</form>
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
namespace EJ2CoreSampleBrowser.Controllers
{
public class DateRangePicker
{
[Required(ErrorMessage = "Please enter the value")]
public DateTime?[] value { get; set; }
}
public class HomeController : Controller
{
DateRangePicker DateRangeValue = new DateRangePicker();
public ActionResult Index()
{
DateRangeValue.value = new DateTime?[] { new DateTime(2020, 03, 03), new DateTime(2021, 09, 03) };
return View(DateRangeValue);
}
[HttpPost]
public ActionResult Index(DateRangePicker model)
{
//posted value is obtained from the model
DateRangeValue.value = model.value;
var startDate = model.value[0];
var endDate = model.value[1];
return View(DateRangeValue);
}
}
}