Render TimePickerFor

17 Feb 20222 minutes to read

The TimePickerFor 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 TimePickerFor component.

CSHTML

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

Timepickerfor.cs

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

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

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

Selected value will be retrieved as below.