UI for ASP.NET MVC
ASP.NET MVC TimePicker
- Use the ASP.NET MVC TimePicker to easily select a time from a dropdown menu. Take advantage its out-of-the-box RTL support, accessibility compliancy and keyboard navigation.
- Part of the Telerik UI for ASP.NET MVC library along with 110+ professionally designed UI components.
- Includes support, documentation, demos, virtual classrooms and more!
-
Overview
The ASP.NET MVC TimePicker component lets users select a certain time from a dropdown menu. It can be implemented in various app scenarios, such as a booking application or a scheduler application with reminders. The component has two looks – modern and classic. It supports RTL users, keyboard navigation and is compliant with accessibility standards.
See the ASP.NET MVC TimePicker in action
-
Component Type
The Telerik UI for ASP.NET MVC TimePicker allows you to choose between two component types:- Modern – renders a popup with sleek UI allowing users to set date, time and AM/PM
- Classic – renders a dropdown list allowing users to scroll and choose the time they want.
In both types, the user can also manually type in the desired time.
-
Focused Time
Easily define focused time when the time chooser pop-up is opened, thus elevating user interactions with the Telerik UI for ASP.NET MVC TimePicker component even further. The focused time capability provides a convenient way for the user to effortlessly select a highlighted time slot.
See the Telerik UI for ASP.NET MVC TimePicker focused time documentation
-
Range Selection
In many scenarios users might need to specify a time range, this can be easily done by adding two TimePicker components to your application allowing users to select Start and End time
-
Floating Label
Deliver smoother and more efficient form experiences to users, leveraging the UI for ASP.NET MVC TimePicker floating label feature. By adding a label that floats above the input, you can save space while ensuring end-users don’t lose context of the required input.
-
Adaptive Mode
Setting the AdaptiveMode parameter to AdaptiveMode.Auto provides you with a mobile-friendly rendering of the TimePicker time selector popup. This allows automatic adaptation of the picker component to the current screen size and changes its rendering accordingly.
See the Telerik UI for ASP.NET MVC TimePicker Adaptive Rendering Demo
-
Date and Time Picker
If you need a component which allows you to choose both date and time from the same place,, you can implement the Telerik UI for ASP.NET MVC DateTimePicker.
-
Events
The TimePicker exposes multiple events for handling interaction with the component and its values such as Open, Close, Change and more.
-
Globalization
The ASP.NET MVC TimePicker control supports Globalization and is designed to work in different cultures and respond to their requirements for time formatting. You can define the culture through the kendo.culture() method.
Check out the ASP.NET MVC TimePicker Globalization demo
-
RTL Support
The Telerik UI for ASP.NET MVC TimePicker supports right-to-left users, and it can be easily adapted by changing the alignment from left-to-right and right-to-left with only a few settings.
-
Accessibility
The Telerik TimePicker is perfect for scenarios where accessibility is important for your application. The control is compliant with Section 508 and WCAG 2.1 guidelines guaranteeing smooth UX for all users.
-
Keyboard Navigation
The TimePicker component supports out-of-the-box keyboard navigation. It allows users to open and close the popup and select the desired time. To see a full list of keyboard controls and user actions visit this demo.
-
TimePicker Theming
You can style the TimePicker component with the help of the multiple built-in themes and swatches the component comes with. Explore the Default (our own styling), Material (based on the Material Design guidelines), Bootstrap (which resembles the Bootstrap styling to integrate better) and Fluent (based on Microsoft Fluent UI) themes and choose the swatch that best suits your application.
You can easily customize the available themes with a few lines of CSS or create a new one with the Progress SASS ThemeBuilder application to meet your client’s design requirements.
