ASP.NET MVC TimePicker Overview
The TimePicker is part of Telerik UI for ASP.NET MVC, 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 HtmlHelper for ASP.NET MVC is a server-side wrapper 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.
)
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")
)
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))
[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; }
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