• Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Localization
*Translated by Google Translator.
Currency
Essential Studio
HOME
All Controls

Example of Time Duration in ASP.NET Core TimePicker Control

The following sample demonstrates the popup list element in specific time duration. Click/Touch the TimePicker popup icon to select the desired value.

DEMO
SOURCE

The Time Duration sample illustrates, how to customize or disable the time values in time list popup by using itemRender event. Here, all the time values has addition information on duration between them in sequence and some of the values are disabled through itemRender event by adding the e-disabled class.By using the scrollTo property can set the scroll position to the given value when no value is selected or the selected value is not availble in the timepicker popup list.

More information about the TimePicker and it's configuration can be found in the documentation section.

Transform your ASP.NET Core web apps today with Syncfusion ASP.NET Core components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE