Kendo UI for jQuery

jQuery TimeDurationPicker

  • Allow a user to type or select a specific time duration, leveraging the built-in list of values for days, hours, minutes, seconds and milliseconds with the Kendo UI for jQuery TimeDurationPicker component.
  • Part of the Kendo UI for jQuery library along with 100+ professionally designed components developers trust for all their jQuery UI needs.
  • Get up and running quickly with award winning support, detailed documentation, demos, virtual classrooms and a three-million-strong developer community.
Kendo UI for jQuery TimeDurationPicker Component Header
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    The Kendo UI for jQuery TimeDurationPicker component enables users to select a particular time duration, without the necessity to provide a specific date, range of dates or time slot. Instead, they are empowered to determine how many days, hours, minutes, or seconds an activity (e.g., online session, event, work project, etc.) is expected to take. Users can either type the desired time duration or pick a value from the component popup with built-in shortcut values.

    See the jQuery TimeDurationPicker Component demo

    Kendo UI for jQuery TimeDurationPicker Component Overview
  • Columns

    Configure the columns in the Kendo UI for jQuery TimeDurationPicker component popup with ease. You can determine the columns number, specify format for each one of them and constrain the allowed selectable values.

    See the jQuery TimeDurationPicker Columns demo

  • Shortcuts

    Effortlessly add shortcuts for your users in the form of button elements to the TimeDurationPicker component popup. These button elements can have predefined values and upon clicking on one of them, the value of the TimeDurationPicker gets updated. This is useful for activities or events with repetitive duration time.

    See the jQuery TimeDurationPicker Shortcuts demo

    Kendo UI for jQuery TimeDurationPicker Component Shortcuts
  • Appearance

    Simply turning an input element into a time duration picker is not enough—you must also be equipped with the right options to customize its appearance. That’s why the Kendo UI for jQuery TimeDurationPicker component comes with various options, allowing you to control its size, fill mode and border radius. Additionally, you can easily switch between the available themes and swatches to test what colors match your needs.

    See the jQuery TimeDurationPicker Appearance demo

    Kendo UI for jQuery TimeDurationPicker Component Appearance
  • Events

    Ensure smooth interaction with the component thanks to the jQuery TimeDurationPicker’s set of events:

    • Change event – triggered when the selected time duration is changed
    • Open event – fires when the TimeDurationPicker component is opened
    • Close event – triggered when the TimeDurationPicker component is closed

    See the jQuery TimeDurationPicker Events demo

  • Keyboard Navigation

    Improve accessibility and productivity with keyboard-only navigation. This component supports keyboard navigation to help navigate the jQuery TimeDurationPicker and assist with selecting a value using the keyboard alone.

    See the jQuery TimeDurationpicker Keyboard Navigation demo

    Telerik UI for ASP.NET Core Keyboard Navigation
  • Theming

    The jQuery TimeDurationPicker component supports four built-in themes, including Default (our own Telerik-infused styling), Material (based on the Material Design guidelines), Bootstrap and Fluent. Additionally, you can customize any of the ready-to-use themes with a few lines of CSS or create a new one to match your branding needs by using the Progress ThemeBuilder application.

    Kendo UI for jQuery TimeDurationPicker Component Theming