ASP.NET Core TimePicker Overview
The TimePicker is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI TimePicker TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI TimePicker widget.
The TimePicker enables users to select time values from a predefined list or enter new ones.
Initializing the TimePicker
The following example demonstrates how to how to define the TimePicker.
@(Html.Kendo().TimePicker()
.Name("timepicker") // The name of the TimePicker is mandatory. It specifies the "id" attribute of the widget.
.Value(DateTime.Now) // Set the value of the TimePicker.
)
<kendo-timepicker name="timepicker" value="DateTime.Now"></kendo-timepicker>
Basic Configuration
The TimePicker TagHelper configuration options are passed as attributes.
@(Html.Kendo().TimePicker()
.Name("end")
.Value("8:30 AM")
.Min("8:00 AM")
.Max("7:30 AM")
)
<kendo-timepicker name="end" value="new DateTime(1900, 1, 1, 8, 30, 0)"
min="new DateTime(1900, 1, 1, 8, 0, 0)" max="new DateTime(1900, 1, 1, 7, 30, 0)">
</kendo-timepicker>
Functionality and Features
- Selected time—The TimePicker allows you to render a pre-selected time and also define the minimum and maximum time it displays.
- Focused time—The TimePicker allows you to define focused time when the pop-up is opened.
- Formats—The TimePicker allows you to define its time formatting.
- Validation—The TimePicker is designed to keep its input value unchanged even when the typed time is invalid.
- Globalization—The globalization process combines the translation of component messages (localization) with adapting them to specific cultures.
- Accessibility—The TimePicker is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
Next Steps
- Configuring the Floating Label of the TimePicker
- Customizing the Appearance of the TimePicker
- Using Validation with the TimePicker