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>
Starting with the 2024 Q3 release, the HtmlHelper version of the component supports declarative initialization.
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>
Model Binding
The TimePicker component respects DataAnnotation attributes when using the TimePickerFor(m => m.Property) declaration. Besides the [Required] attribute, the TimePicker also supports the [DisplayFormat] and [Range] attributes. The Format configuration will be set based on the specified DisplayFormat. The Min and Max options will be set based on the [Range] attribute.
@(Html.Kendo().TimePickerFor(m => m.MyDateTimeProperty))
<kendo-timepicker for="MyDateTimeProperty">
</kendo-timepicker>
[Required]
[DisplayFormat(DataFormatString = "{0:HH:mm:ss tt}", ApplyFormatInEditMode = true)]
[Range(typeof(DateTime), minimum: "01/01/2023 03:00:00 AM", maximum: "12/31/2023 10:00:00 AM")]
public DateTime MyDateTimeProperty{ get; set; }
TimeOnly compatability
As of the 2024 Q4 Release the ASP.NET Core TimePicker is compatible with the TimeOnly type. Following this release you can also set the value of the component to a TimeOnly property:
@(Html.Kendo().TimePicker().Name("timeOnly").Value(new TimeOnly(10,20,30)))
<kendo-timepicker name="timeOnly" value="new TimeOnly(10,20,30)"></kendo-timepicker>
Functionality and Features
| Feature | Description |
|---|---|
| Adaptive Mode | The TimePicker supports an adaptive mode that provides a mobile-friendly rendering of its popup. |
| Component Type | The TimePicker allows you to choose from both a standard and a modern rendering appearance. |
| Floating Labels | You can explicitly set a floating label which floats above the field and remains visible. |
| 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. |
| Interval | You can configure the interval between the time values. |
| 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 for screen readers, supports WAI-ARIA attributes, delivers keyboard shortcuts for faster navigation, and allows you to render it in a right-to-left direction. |
| Automatic Correction | You can configure whether the component will autocorrect the user's input when the Min and Max values are set. |
Next Steps
- Configuring the Floating Label of the TimePicker
- Customizing the Appearance of the TimePicker
- Using Validation with the TimePicker