New to Telerik UI for ASP.NET CoreStart a free 30-day trial

ASP.NET Core TimePicker Overview

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.

Razor
    @(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.
    )

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.

Razor

        @(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.

Razor
    @(Html.Kendo().TimePickerFor(m => m.MyDateTimeProperty))

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:

Razor
    @(Html.Kendo().TimePicker().Name("timeOnly").Value(new TimeOnly(10,20,30)))

Functionality and Features

FeatureDescription
Adaptive ModeThe TimePicker supports an adaptive mode that provides a mobile-friendly rendering of its popup.
Component TypeThe TimePicker allows you to choose from both a standard and a modern rendering appearance.
Floating LabelsYou can explicitly set a floating label which floats above the field and remains visible.
Selected timeThe TimePicker allows you to render a pre-selected time and also define the minimum and maximum time it displays.
Focused timeThe TimePicker allows you to define focused time when the pop-up is opened.
IntervalYou can configure the interval between the time values.
FormatsThe TimePicker allows you to define its time formatting.
ValidationThe TimePicker is designed to keep its input value unchanged even when the typed time is invalid.
GlobalizationThe globalization process combines the translation of component messages (localization) with adapting them to specific cultures.
AccessibilityThe 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 CorrectionYou can configure whether the component will autocorrect the user's input when the Min and Max values are set.

Next Steps

See Also