Search results

Getting Started

This section briefly explains about how to include a simple TimePicker component in your ASP.NET MVC application. You can refer ASP.NET MVC Getting Started documentation page for introduction part of the system requirements and configure the 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 MVC 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 MVC 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.

razor
@Html.EJS().TimePicker("timepicker").Render();

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.

razor
daterange.cs
@Html.EJS().TimePicker("timepicker").Value(ViewBag.value).Min(ViewBag.minVal).Max(ViewBag.maxVal).Render()
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..

razor
format.cs
@Html.EJS().TimePicker("timepicker").Value(ViewBag.value).Format("HH:mm").Step("60").Render()
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();
        }
    }
}