Components / Library Version 4.0.0

Timepicker

The Timepicker allows users to pick a time either by typing in the input field or by selecting a time in a dropdown menu.

PropertiesExamplesAPIAccessibility

* Required property

label *
string
A description for the input. Required even if the label-position is set to none (for accessibility reasons).
disabled
boolean
Disables the component.
error-message
string
The message to display if the user input fails a validation.
label-position
top | left | none
Defaults to top. Set to none if no label should be displayed.
preselected
string: 24hr time
The time the dropdown focuses when opened. If preselected is not provided, the dropdown will open to a time based on the value property. If the value is unable to be parsed, opens to "09:00 AM".
required-field
boolean
Defaults to top. Set this property to none if no label should be displayed.
value
string
The time displayed in the input field. The value property is updated as the user types, and can be set by the application as necessary.

Usage in HTML

Edit the code below to see changes reflected in the example above.

Javascript Sample

Example code for functionality.

Usage in Elm

Code generated from HTML.

Methods

See source code for method definitions.

reformatTime
Reformats a time string to/from 12hr and 24hr format.

Parameters

outputFormat ("12" | "24")
The desired time format.
time (string)
Time string to reformat.

Usage

reformatTime("12", "15:47"); // returns "03:47 PM"
reformatTime("24", "11:53 PM"); // returns "23:53"
isValidTime
Checks a time in 24hr format, returning a boolean based on that time's validity.

Parameters

time (string: "hh:mm")
Time string to validate.

Usage

isValidTime("12:30"); // returns true
isValidTime("16:72"); // returns false, 72 is minutes is an incorrect time

Events

wmTimepickerInputBlurred
Emitted when the Timepicker's input field is blurred.
wmTimepickerTimeSelected
Emitted when a time is selected from Timepicker's dropdown. The event detail contains the selected time in 24hr hh:mm format.
input
Emitted when a user types in the input field.

Keyboard Support

Input Field

Key Function
Tab Focuses the button.
Up Arrow Down Arrow Opens dropown bringing focus on the value closest to the one displayed in the input. If the input field is blank, the dropdown opens with 09:00 in focus.

Button

Key Function
Shift + Tab Focuses the input field.
Space Enter Up Arrow Down Arrow Opens dropown bringing focus on the value closest to the one displayed in the input. If the input field is blank, the dropdown opens with 09:00 in focus.
Key Function
Space Enter Selects the option and closes the dropdown. Focus is returned to the button.
Tab Closes the dropdown and focuses the next focusable element.
Escape
  • Closes the dropdown without changing the time.
  • Focuses the button.
Up Arrow Focuses the previous time in the list.
Down Arrow Focuses the next time in the list.
Home Focuses the first time in the list (12:00 AM).
End Focuses the last time in the list (11:45 PM).