Skip to main content

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 (14)

Supported targets

Anchor to Use casesUse cases

  • Compact selection: Provide compact date selection in space-constrained interfaces.
  • Quick navigation: Enable quick date selection by scrolling through nearby dates.
  • Modal dialogs: Support date input in modal dialogs where a spinner is more appropriate.
  • Touch optimization: Offer touch-optimized scrolling date selection for POS devices.

Anchor to PropertiesProperties

Lets merchants select a date using spinner controls.

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 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

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

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

Open the date spinner from a button by setting the button's command property to --show and its commandFor property to the date spinner's id. This example uses an s-button to open the spinner and an onChange handler to capture the selected date, 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 handles the onInput, onChange, onFocus, and onBlur events. onChange captures the selected date, enabling validation, scheduling logic, or dynamic updates based on the chosen date, and onFocus and onBlur fire when the spinner is revealed and dismissed.

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?