Search results

Getting Started

This section briefly explains how to include a simple TimePicker component 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 components.

Initialize TimePicker component to the Application

TimePicker component 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 component.

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

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

Setting the value, 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 7:00 AM to 4:00 PM.

tagHelper
daterange.cs
<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 partial class HomeController: Controller
    {
        
        public IActionResult DefaultFunctionalities()
        {
            ViewBag.minVal= new DateTime(2017,05,07, 07,00,00);
            ViewBag.maxVal = new DateTime(2017,05,07, 04,00,00);
            ViewBag.value =  new DateTime(2017,05,07, 01,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 component in 24 hours format with 60 minutes interval. The time interval is set to 60 minutes by using the step property.

tagHelper
format.cs
<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 partial class HomeController: Controller
    {
        
        public IActionResult Format()
        {
            ViewBag.value = DateTime.Now;
            return View();
        }
    }
}