Getting started with ASP.NET Core TimePicker control

This section briefly explains how to include a simple TimePicker control in your ASP.NET Core application. You can refer to ASP.NET Core Getting Started documentation page for system requirements, and configure common specifications.

Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, you also have to include a license key in your projects. Please refer to this link to know about registering Syncfusion license key in your ASP.NET Core application to use our controls.

Initialize TimePicker control to the Application

TimePicker control can be rendered by using the ejs-timepicker tag helper in ASP.NET Core application. Add the below simple code to your index.cshtml page which is available within the Views/Home folder, to initialize the TimePicker.

The following example shows a basic TimePicker control.

<ejs-timepicker id="timepicker"></ejs-timepicker>

Running the above code will display the basic TimePicker on the browser.

Setting the value within min and max time

The following example demonstrates how to set the value, min and max time on initializing the TimePicker. The TimePicker allows you to select the time value within a range from 1:00 AM to 11:00 AM.

<ejs-timepicker id="timepicker" value="@ViewBag.value" min="@ViewBag.minVal" max="@ViewBag.maxVal"></ejs-timepicker>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public class HomeController: Controller
    {
        
        public ActionResult DefaultFunctionalities()
        {
            ViewBag.minVal = new DateTime(2017, 05, 07, 1, 00, 00);
            ViewBag.maxVal = new DateTime(2017, 05, 07, 11, 00, 00);
            ViewBag.value = new DateTime(2017, 05, 07, 4, 00, 00);
            return View();
        }
    }
}

Setting the time format

Time formats is a way of representing the time value in different string format in textbox and popup list. By default, the TimePicker’s format is based on the culture. You can also customize the format by using the format property. To know more about the time format standards, refer to the Date and Time Format section.

The following example demonstrates the TimePicker control in 24 hours format with 60 minutes interval. The time interval is set to 60 minutes by using the step property.

<ejs-timepicker id="timepicker" format="HH:mm" step="60" value="@ViewBag.value"></ejs-timepicker>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public class HomeController: Controller
    {
        
        public ActionResult Format()
        {
            ViewBag.value = DateTime.Now;
            return View();
        }
    }
}

See Also

• Render TimePicker with min and max time
• How to achieve validation with TimePicker
• Render TimePicker with specific culture