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
@using (Html.BeginForm())
{
    @Html.EJS().DateTimePickerFor(model => model.value).Render()
    <div>
        @Html.ValidationMessageFor(model => model.value)
    </div>
    <div id="submitbutton">
        @Html.EJS().Button("btn").Content("Post").Render()
    </div>
}

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);
        }
    }
}