ASP.NET Core Blazor [Preview]
Search results

Getting Started

This section briefly explains how to include simple TimePicker control in your ASP.NET Core Razor application. You can refer to ASP .NET Core Razor Components Getting Started documentation page for introduction part of the system requirements and configure the common specifications.

Adding component to the Application

TimePicker component can be rendered by using the EjsTimePicker tag helper in ASP.NET Core Razor application. Add the TimePicker component in any web page razor in the Pages folder. For example, the TimePicker component is added in the ~/Pages/Index.razor page.

The following example shows a basic TimePicker component.

    <EjsTimePicker id="timepicker" placeholder="Select a time"></EjsTimePicker>

Run the application

After successful compilation of your application, simply press F5 to run the application.

Output be like the below.

TimePicker Sample

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.

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.

    <EjsTimePicker id="timepicker" value="@value" step="60" format="HH:mm"></EjsTimePicker>

    @functions{
        public DateTime value {get;set;} = DateTime.Now;
    }