Components / Library version 3.25.1

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. It displays time to the user in 12-hour format (AM/PM) and exposes the selected value in 24-hour format. The value can be retrieved via the component's value attribute. The invalid attribute indicates whether the user input has passed the component's validation.

The component displays an error message if the user input fails the validations (wrong format, or missing input, if the input is marked as required). The component can also display a customized error message.

Properties Examples Events Accessibility Notes

* 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 performed outside of the component.
invalid
read-only
Use this attribute to check whether the component validated the user input.
label-position
top | left | none
Defaults to top. Set to none if no label should be displayed.
prevent-validation
string
Validation will not occur when clicking on an element with this id. Accepts multiple ids separated by spaces. See Notes tab for more information.
required-field
boolean
Defaults to top. Set this property to none if no label should be displayed.
required-field-message
string
The message to display when an error is displayed due to the field being left empty. If not set, this message will be: "A time is required."
value
string
The time to initially display in the input. The value attribute will be updated when the user enters or selects a time, just like the native input element. The component expects the value to be in 24-hour format. If no value is initially set or an empty string is passed, the component will display a placeholder in the input (hh:mm).

Usage in HTML

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

Usage in Elm

Code generated from HTML.
wmTimepickerNewValidValue
Emitted when the Timepicker's value changes and is valid. Triggered when blurring the input field or making a selection through the dropdown.
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).

The prevent validation prop is used with a specific use-case in mind. When components that feature required fields are initally focused within a modal, closing the modal will flash the required error. The prevent validation prop is useful in this case, where the close button's id can be passed through preventing the validation flash.

In a compound component like Select or Action Menu, child components are rendered in the parent's slot element, part of its shadow DOM tree. Slots essentially serve as a placeholder for markup that you the developer define in the light DOM tree, like <wm-menuitem>, <wm-option>, text content, or other child elements.

The browser distributes the child elements defined in the light DOM into the shadow DOM of the parent. The result is a flattened DOM tree—a merger of the the light DOM and the shadow DOM. This flattened tree is what you see in DevTools and what is rendered on the page.

With the standard implementation of the component, dynamically updating the child items will throw an error. Elm's efficient diffing of the DOM will register that only the child items have changed and try to update them, but the component has already been composed.

Rendering the component in a Keyed node and giving it a dynamic id will cause the entire component, rather than just the child items, to render anew, avoiding the error.