Timepicker

The Timepicker component is a specialized form component that enables a user to select a time value from a dropdown menu. It supports both 12-hour and 24-hour formats with configurable time intervals and includes all validation states. Built on top of the Select component for consistent behavior and styling.

Import

React

// with @dhl-official/react-library:
import { DhlTimepicker } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlTimepicker } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-timepicker></dhl-timepicker>

Vue.js

// with @dhl-official/vue-library:
import { DhlTimepicker } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlTimepicker } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlTimepicker
  format="24h"
  interval={15}
  variant={{
    label: "Meeting Time",
    placeholder: "Select time",
    type: "animated"
  }}
></DhlTimepicker>

Angular

<dhl-timepicker
  format="24h"
  [interval]="15"
  [variant]="{
    label: 'Meeting Time',
    placeholder: 'Select time',
    type: 'animated'
  }">
</dhl-timepicker>

Vue.js

<dhl-timepicker
  format="24h"
  :interval="15"
  :variant="{
    label: 'Meeting Time',
    placeholder: 'Select time',
    type: 'animated'
  }">
</dhl-timepicker>

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
customFilter	custom-filter	An optional callback handler that accepts the options and input data, used for custom filtering. If this function is not passed, by default, filtering will happen on the "label" key of the item if its an object or the actual value if the item is a primitive data type	(options: unknown, value: string) => DhlSelectionOptionType[]	undefined
dataAriaDescribedby	data-aria-describedby	An optional prop defining the list of reference IDs (separated by spaces), recommended when you want to an error message on your field.	string	undefined
dataAriaExpanded	data-aria-expanded	An optional prop used for assistive technology support - used to mark expandable and collapsible regions.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	undefined
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
format	format	An optional prop to define the time format. - "24h" - 24-hour format (00:00 - 23:59) - "12h" - 12-hour format (12:00 AM - 11:59 PM)	"12h" | "24h"	"24h"
getItemLabel	get-item-label	An optional prop used to read the label of an option.	(option: any) => void	undefined
interval	interval	An optional prop to define the minute interval between time options. Valid values: 1, 5, 10, 15, 30, 60	1 | 10 | 15 | 30 | 5 | 60	15
isDisabled	is-disabled	An optional flag to define if the component is disabled.	boolean	false
name	name	An optional value to be set to the element HTML name attribute. It takes any valid value that can be used for the name attribute of an HTMLInputElement.	string	undefined
openOnFocus	open-on-focus	An optional prop when set to true, the select option list will be shown on input focus.	boolean	false
options	options	An optional prop to provide custom time options instead of auto-generated ones. When provided, this overrides the format and interval props.	DhlSelectionOptionType[]	undefined
readonly	readonly	An optional flag to define if the component is readonly.	boolean	false
required	required	An optional prop to flag the component as required within a form context.	boolean	undefined
showAllOptionsAfterSelection	show-all-options-after-selection	An optional prop flag to define if options should be filtered after selection.	boolean	true
showClearButton	show-clear-button	An optional prop flag to define if clear button is displayed.	boolean	false
showRightIcon	show-right-icon	An optional prop flag to define if right icon is displayed.	boolean	true
size	size	An optional prop to define the size of the component.	Sizes.MD | Sizes.SM	Sizes.MD
validation	validation	An optional object to set-up a custom components validation state. Required Fields: type	{ type: Variants.warning | Variants.valid | Variants.invalid | Variants.note; message?: string; }	undefined
value	value	An optional prop defining the value of the component which is taken when a form is submitted. Should be in 24-hour format (HH:MM).	string	""
variant	variant	A optional object to set-up a custom components variant state. It can be used to set a custom label, a custom placeholder text, enable or disable label animation (via the mandatory type field).	{ label?: string; placeholder?: string; type: Variants.animated | Variants.static; }	{ label: "Select Time", placeholder: "Select Time", type: Variants.animated, }

Dependencies

Depends on

• dhl-select

Graph

---

Built by DHL User Interface Library Team!