The Blazor TimePicker component lets the user enter only a valid time that conforms to the specified format, culture, min and max settings. It also supports forms validation, keyboard navigation and provides events, and works in both WebAssembly (WASM) and Server-side Blazor apps
Additionally, the user is presented with a popup they can use to navigate in a visual manner to choose the desired time through modern spinners.
Check out the Blazor TimePicker demo
The Telerik Blazor TimePicker restricts input to the format specified by the developer. This ensures a valid date, time, and full control over the display.
You can choose from the standard .NET format specifiers, and to also write your own – just like you would with any C# code.
Form validation through DataAnnotation attributes comes out-of-the-box with the Telerik Blazor Time Picker.
Validation modes are available with the UI for Blazor TimePicker component, which helps you choose whether validation is triggered on change, blur, or typing, allowing you to choose the best option for your needs.
You can easily customize popups within a single dedicated tag with the TimePicker UI component. In addition to that, the Open and Close methods allow you to toggle the popup visibility without triggering the OnOpen/OnClose events.
The TimePicker offers the standard ValueChanged event and also an OnChange event that still lets you react to the user choosing a new date and time but does not prevent two-way binding.
Learn more about the TimePicker events
The Telerik TimePicker automatically carries culture-aware formats to the client so users see the dates they are used to – for example, if you set the format to “t” people in the US can see the 12 hour format with AM/PM indicators while people in Germany will see a 24 hour clock. Button texts are easily translatable to any language.
The Telerik TimePicker component honors web accessibility standards (WCAG, Section 508 and WAI-ARIA attributes for screen readers) and lets you enter values with the keyboard only – not only by typing, but also by pressing the arrow keys, which includes navigation in the time tumblers popups as well – all without ever touching the mouse.
The Telerik Blazor TimePicker has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which looks like the Bootstrap styling to integrate better). You can easily customize any of out-of-the-box themes with a few lines of CSS, or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.