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

Supported targets

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

Anchor to example-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

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

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