Blazor TimePicker - Overview

Schedule Your Visit

  • Overview.razor
  • ScheduleVisitTemplate.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming
blazor ui ninja image

The TimePicker component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.


The Telerik UI for Blazor TimePicker component allows users to select time from a visual list in a dropdown or to type it into a date input that can accept only DateTime values. The values of the two controls are synchronized to enable further change of the chosen date.

With support for form validation, the Blazor TimePicker permits the user to only enter a time that matches specific time values. The Time Picker component supports DateTime, DateTime?, DateTimeOffset and DateTimeOffset? types.

Once you have created your basic TimePicker by adding the Razor tag to your page, binding the DateTime object, you can opt to provide custom values for Format, Max and Min.

From there, you can set incremental steps for the TimePicker and you can change selected values by clicking the rendered arrows. The steps can be set using the TimePickerSteps tag and its value parameters.

Navigation is available to the user through a pop-up that delivers a visual manner for selecting time via modern spinners. Both WebAssebmly and Server-side Blazor apps are supported by the Telerik UI for Blazor TimePicker.

When you need a seamless way to select values within an input area or from a time popup, the Blazor TimePicker component offers a synchronized approach for working between both elements.

The brilliance of the TimePicker component is that it is engineered to comply with your app requirements.

This TimePicker Overview example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.