Choose a version:

DateSpinner

The dateSpinner 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 datePicker instead. For text date entry, use dateField.

Support

Targets (18)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the dateSpinner component.

Configure the following properties on the date spinner component.

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

This uses a date in YYYY-MM-DD format.

Anchor to EventsEvents

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

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: Callback when the date spinner is dismissed.
Anchor to change change (event: <"s-date-spinner">) => void: Callback when the value changes. Only called when a different value is selected.
Anchor to focus focus (event: <"s-date-spinner">) => void: Callback when the date spinner is revealed.
Anchor to input input (event: <"s-date-spinner">) => void: Callback when the user makes a selection.

Anchor to ExamplesExamples

Examples

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"

Preview

Examples

Description
Enable compact date selection using a dateSpinner 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" 
/>
```
Description
Control dateSpinner 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)}
  />
</>;
```
Description
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 dateSpinner 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, datePicker provides faster navigation.
Provide interaction cues: Consider labels or instructions to help first-time users understand the scrollable column interface.

Was this page helpful?

Supported targets

Supported targets

Anchor to PropertiesProperties

Anchor to EventsEvents

CallbackEvent

Anchor to ExamplesExamples

Anchor to Best practicesBest practices