Search results

Getting Started

This section briefly explains how to include a simple TimePicker in your Blazor client-side application. You can refer to the Getting Started with Syncfusion Blazor for Client-side in Visual Studio 2019 Preview page for introduction part of the system requirements and configure the common specifications.

Importing Syncfusion Blazor component in the application

  1. Install Syncfusion.EJ2.Blazor NuGet package to the application by using the NuGet Package Manager. Check the Include prerelease option.

  2. You can add the client-side resources through CDN or local npm package to the <head> element of the ~/wwwroot/index.html page.

<head>
    <link href="https://cdn.syncfusion.com/ej2/17.3.29/material.css" rel="stylesheet" />
    <script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ej2.min.js"></script>
</head>

If you are using server-side application, add required resources to the ~/Pages/_Host.html page.

Adding component package to the application

Import the Syncfusion.EJ2.Blazor.Calendars packages in ~/_Imports.razor file.

@using Syncfusion.EJ2.Blazor

@using Syncfusion.EJ2.Blazor.Calendars

Adding TimePicker component to the application

Now, add the Syncfusion Blazor TimePicker component to any razor page in the Pages folder. For example, the TimePicker component is added in the ~/Pages/Index.razor page.

The following code shows a basic TimePicker component.

<EjsTimePicker PlaceHolder="Select a time"></EjsTimePicker>

Run the application

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

The output will be as follows.

TimePicker

Setting the time format

Time format 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. But you can customize the Format of the TimePicker using the Format property.

The below code demonstrates how to render TimePicker component in 24 hours Format with 60 minutes interval. The time interval is set to 60 minutes by using the Step property.

<EjsTimePicker Value="@TimeValue" Step=60 Format="HH:mm"></EjsTimePicker>

@code {
    public DateTime TimeValue {get;set;} = DateTime.Now;
}

The output will be as follows.

TimePicker

See Also