ASP.NET MVC TimePicker Overview

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.

• Demo page for the TimePicker

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

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))

C#

        [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

See Also

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