Choose a version:

TimePicker

Allows merchants to select a specific time.

Anchor to propertiesProperties

Anchor to id id string: A unique identifier for the element.
Anchor to value value string Default: '': Current selected value.

The default, '', means no time is selected.

The value must be a 24-hour time in HH:mm:ss format, with leading zeros.

Examples: "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.

See: https://developer.mozilla.org/docs/Web/HTML/Element/input/time

If the provided value is invalid, '' is used as the value.

Was this section helpful?

Anchor to eventsEvents

Learn more about registering events

Anchor to blur blur (event: <"s-time-picker">) => void: Callback when the time picker is dismissed.
Anchor to change change (event: <"s-time-picker">) => void: Callback when the user selects a time from the picker that is different to the current value.
Anchor to focus focus (event: <"s-time-picker">) => void: Callback when the time picker is revealed.
Anchor to input input (event: <"s-time-picker">) => void: Callback when the user selects a time from the picker.

CallbackEvent

bubbles
```
boolean
```
cancelable
```
boolean
```
composed
```
boolean
```
currentTarget
```
HTMLElementTagNameMap[T]
```
detail
```
any
```
eventPhase
```
number
```
target
```
HTMLElementTagNameMap[T] | null
```

interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
  currentTarget: HTMLElementTagNameMap[T];
  bubbles?: boolean;
  cancelable?: boolean;
  composed?: boolean;
  detail?: any;
  eventPhase: number;
  target: HTMLElementTagNameMap[T] | null;
}

Was this section helpful?

Code

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

Show

</s-button>

<s-time-picker

value="9:41"

id="time-picker"

/>

Preview

Anchor to examplesExamples

TimePicker usage patterns

Anchor to example-command-systemCommand system

Show and hide TimePicker using button commands

Anchor to example-event-handlingEvent handling

Handle time selection events

Was this section helpful?

Command system

<>

<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.target.value)}

/>

</>;

Examples

Command system

Description

Show and hide TimePicker using button commands

Default

<>
  <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.target.value)}
  />
</>;

Event handling

Description

Handle time selection events

Default

<s-time-picker
  value="14:30"
  onInput={(event) => console.log('Input:', event.target.value)}
  onChange={(event) => console.log('Change:', event.target.value)}
  onFocus={(event) => console.log('Focused')}
  onBlur={(event) => console.log('Blurred')}
/>