# 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. * [Demo page for the TimePicker](https://demos.telerik.com/aspnet-core/timepicker/index) * [Demo page for the TimePicker](https://demos.telerik.com/aspnet-core/timepicker/tag-helper) ## Initializing the TimePicker The following example demonstrates how to how to define the TimePicker. ```Razor HtmlHelper @(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. ) ``` ```Razor TagHelper ``` > Starting with the 2024 Q3 release, the HtmlHelper version of the component supports [declarative initialization](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/helper-basics/declarative-initialization). ## Basic Configuration The TimePicker TagHelper configuration options are passed as attributes. ```Razor HtmlHelper @(Html.Kendo().TimePicker() .Name("end") .Value("8:30 AM") .Min("8:00 AM") .Max("7:30 AM") ) ``` ```Razor TagHelper ``` ## 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`](https://www.telerik.com/aspnet-core-ui/documentation/api/kendo.mvc.ui.fluent/timepickerbuilder#formatsystemstring) configuration will be set based on the specified `DisplayFormat`. The [`Min`](https://www.telerik.com/aspnet-core-ui/documentation/api/kendo.mvc.ui.fluent/timepickerbuilder#minsystemstring) and [`Max`](https://www.telerik.com/aspnet-core-ui/documentation/api/kendo.mvc.ui.fluent/timepickerbuilder#maxsystemstring) options will be set based on the `[Range]` attribute. ```Razor HtmlHelper @(Html.Kendo().TimePickerFor(m => m.MyDateTimeProperty)) ``` ```Razor TagHelper ``` ```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; } ``` ## TimeOnly compatability As of the 2024 Q4 Release the ASP.NET Core TimePicker is compatible with the [`TimeOnly`](https://learn.microsoft.com/en-us/dotnet/api/system.timeonly?view=net-8.0) type. Following this release you can also set the value of the component to a `TimeOnly` property: ```Razor HtmlHelper @(Html.Kendo().TimePicker().Name("timeOnly").Value(new TimeOnly(10,20,30))) ``` ```Razor TagHelper ``` ## Functionality and Features | Feature | Description | | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Adaptive Mode](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/timepicker/adaptive-mode) | The TimePicker supports an adaptive mode that provides a mobile-friendly rendering of its popup. | | [Component Type](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/timepicker/component-type) | The TimePicker allows you to choose from both a standard and a modern rendering appearance. | | [Floating Labels](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/timepicker/floating-label) | You can explicitly set a floating label which floats above the field and remains visible. | | [Selected time](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/timepicker/selected-times) | The TimePicker allows you to render a pre-selected time and also define the minimum and maximum time it displays. | | [Focused time](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/timepicker/focused-time) | The TimePicker allows you to define focused time when the pop-up is opened. | | [Interval](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/timepicker/interval) | You can configure the interval between the time values. | | [Formats](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/timepicker/formats) | The TimePicker allows you to define its time formatting. | | [Validation](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/timepicker/validation) | The TimePicker is designed to keep its input value unchanged even when the typed time is invalid. | | [Globalization](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/timepicker/globalization/overview) | The globalization process combines the translation of component messages (localization) with adapting them to specific cultures. | | [Accessibility](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/timepicker/accessibility/overview) | 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](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/timepicker/auto-adjust) | 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](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/timepicker/floating-label) * [Customizing the Appearance of the TimePicker](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/timepicker/appearance) * [Using Validation with the TimePicker](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/timepicker/validation) ## See Also * [Using the API of the TimePicker for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/timepicker/api) * [Knowledge Base Section](https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base)