Choose a version:

Time picker

The time picker component allows merchants to select times using an interactive picker interface. Use it when merchants benefit from visual time selection rather than typing exact times.

For direct text entry when merchants know the exact time, use time field.

Support

Targets (16)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the TimePicker component.

Anchor to id id string: A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.
Anchor to value value string Default: '': The current selected value in 24-hour format. An empty string means no time is selected. The value must be in HH:mm:ss format with leading zeros (for example, "00:00:00", "09:05:00", "23:59:00", "14:03:30"). This follows the HTML time input value format, which is always 24-hour with leading zeros regardless of UI presentation.

Anchor to EventsEvents

The time picker component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to blur blur (event: <"s-time-picker">) => void: Called when the element loses focus.
Anchor to change change (event: <"s-time-picker">) => void: Called after editing completes, typically on blur.
Anchor to focus focus (event: <"s-time-picker">) => void: Called when the element receives focus.
Anchor to input input (event: <"s-time-picker">) => void: Called when the user makes any changes in the field.

CallbackEvent

Represents the event object passed to callback functions when interactive events occur. Contains metadata about the event, including the target element, event phase, and propagation behavior.

bubbles
Whether the event bubbles up through the DOM tree.
```
boolean
```
cancelable
Whether the event can be canceled.
```
boolean
```
composed
Whether the event will trigger listeners outside of a shadow root.
```
boolean
```
currentTarget
The element that the event listener is attached to.
```
HTMLElementTagNameMap[T]
```
detail
Additional data associated with the event.
```
any
```
eventPhase
The current phase of the event flow.
```
number
```
target
The element that triggered the event.
```
HTMLElementTagNameMap[T] | null
```

Anchor to ExamplesExamples

Anchor to Select times with a time pickerSelect times with a time picker

Select times using a time picker component. This example shows a basic time picker for selecting hours and minutes.

Select times with a time picker

<s-button command="--show" commandFor="time-picker">

Show

</s-button>

<s-time-picker

value="9:41"

id="time-picker"

Anchor to Control picker visibilityControl picker visibility

Control time picker visibility programmatically using the command system with show and hide methods. This example demonstrates using button commands to display or dismiss the time picker, enabling custom trigger patterns for time selection workflows.

Control picker visibility

<s-button command="--show" commandFor="time-picker">

Select Time

</s-button>

<s-time-picker

id="time-picker"

value="14:30"

onChange={(event) => console.log('Time selected:', event.currentTarget.value)}

</>;

Anchor to Handle time selection eventsHandle time selection events

Subscribe to time selection events to respond when merchants pick a time. This example shows how to handle onChange events to capture selected times, enabling validation, scheduling logic, or dynamic updates based on the chosen time.

Handle time selection events

<s-time-picker

value="14:30"

onInput={(event) => console.log('Input:', event.currentTarget.value)}

onChange={(event) => console.log('Change:', event.currentTarget.value)}

onFocus={(event) => console.log('Focused')}

onBlur={(event) => console.log('Blurred')}

Anchor to Best practicesBest practices

Choose for visual time selection: Use time picker when users benefit from a visual picker interface. Use time field when users know the exact time.
Use correct format: Always use HH:mm:ss format with leading zeros. The internal format is always 24-hour regardless of UI presentation.
Validate before setting values: Invalid values reset to empty string. Implement validation to show appropriate error messages.

Was this page helpful?