Choose a version:

Date spinner

The date spinner component enables merchants to select dates using a spinner interface with scrollable columns for month, day, and year. Use it for compact date selection in space-constrained layouts or when selecting dates close to the current date.

For visual calendar context, consider using date picker instead. For text date entry, use date field.

Support

Targets (16)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the DateSpinner 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 currently selected date value in ISO 8601 format (YYYY-MM-DD, for example, "2024-05-15"). An empty string means no date is selected. Other date formats require conversion before setting this property. Validation occurs when the user finishes editing (on blur), rather than on every keystroke, so invalid dates are flagged after completing entry.

Anchor to EventsEvents

The date spinner component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to blur blur (event: <"s-date-spinner">) => void: Called when the element loses focus.
Anchor to change change (event: <"s-date-spinner">) => void: Called after editing completes, typically on blur.
Anchor to focus focus (event: <"s-date-spinner">) => void: Called when the element receives focus.
Anchor to input input (event: <"s-date-spinner">) => 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 dates with a spinnerSelect dates with a spinner

Enable compact date selection using a date spinner component with scrollable columns for month, day, and year. This example shows a basic date spinner for space-constrained layouts.

Select dates with a spinner

<s-button command="--show" commandFor="date-spinner">

Show

</s-button>

<s-date-spinner

id="date-spinner"

value="2021-09-17"

Anchor to Control spinner visibilityControl spinner visibility

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

Control spinner visibility

<s-button command="--show" commandFor="date-spinner">

Select Date

</s-button>

<s-date-spinner

id="date-spinner"

value="2024-10-26"

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

</>;

Anchor to Handle date selection eventsHandle date selection events

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

Handle date selection events

<s-date-spinner

value="2024-10-26"

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

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

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

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

Anchor to Best practicesBest practices

Use for space-constrained layouts: Choose date spinner for narrow layouts or split-screen interfaces where a calendar view would be impractical.
Best for nearby dates: Use when selecting dates close to the current date. For distant dates, date picker provides faster navigation.
Provide interaction cues: Consider labels or instructions to help first-time users understand the scrollable column interface.

Was this page helpful?