Search results

Render DateTimePickerFor

03 Dec 2021 / 1 minute 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.

The following sample demonstrates how to retrieve the value in the controller by rendering the DateTimePickerFor component.

tagHelper
datetimepickerfor.cs
Copied to clipboard
@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>
Copied to clipboard
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);
        }
    }
}

Selected value will be retrieved as below.

DateTimePickerFor Component in ASP.NET MVC