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.

Download Free 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.

• Demo page for the TimePicker

• Demo page for the TimePicker

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; }

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.
• 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

See Also

• Using the API of the TimePicker for ASP.NET Core (Demo)
• Knowledge Base Section