Render DateTimePickerFor

28 Mar 20222 minutes to read

The DateTimePickerFor component can be rendered by passing a value from the model. The selected date value can be retrieved during form submission using the post method at the server end.

CSHTML

@model EJ2CoreSampleBrowser.Controllers.DateTimePicker
<form method="post">
    <ejs-datetimepicker id="datetimepickerFor" ejs-for="@Model.value"></ejs-datetimepicker>
    <div id="errorMessage">
        <span asp-validation-for="value"></span>
    </div>
    <div id="submitbutton">
        <ejs-button id="submitButton" content="Submit"></ejs-button>
    </div>
</form>

Datetimepickerfor.cs

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace EJ2CoreSampleBrowser.Controllers
{
    public class DateTimePicker
    {
        [Required(ErrorMessage = "Please enter the value")]
        public DateTime? value { get; set; }

    }
    public class HomeController : Controller
    {
        DateTimePicker DateTimePickerValue = new DateTimePicker();
        public ActionResult Index()
        {
            DateTimePickerValue.value =  new DateTime(2020, 03, 03, 10, 00, 00);
            return View(DateTimePickerValue);
        }
        [HttpPost]
        public ActionResult Index(DateTimePicker model)
        {
            //posted value is obtained from the model
            DateTimePickerValue.value = model.value;
            return View(DateTimePickerValue);
        }
    }
}