---
title: Date spinner
description: >-
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](/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/date-picker)
instead. For text date entry, use [date
field](/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/date-field).
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
html: >-
https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/date-spinner
md: >-
https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/date-spinner.md
---
# 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](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/date-picker) instead. For text date entry, use [date field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/date-field).
### Support Targets (16)
### Supported targets
* [pos.cart.line-item-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/cart-details#cart-details-action-modal-)
* [pos.customer-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/customer-details#customer-details-action-modal-)
* [pos.customer-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/customer-details#customer-details-targets)
* [pos.draft-order-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/draft-order-details#draft-order-details-action-modal-)
* [pos.draft-order-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/draft-order-details#draft-order-details-targets)
* [pos.exchange.post.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-exchange#post-exchange-action-modal-)
* [pos.exchange.post.block.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-exchange#post-exchange-targets)
* [pos.home.modal.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/home-screen#home-screen-action-modal-)
* [pos.order-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/order-details#order-details-action-modal-)
* [pos.order-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/order-details#order-details-targets)
* [pos.product-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/product-details#product-details-action-modal-)
* [pos.product-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/product-details#product-details-targets)
* [pos.purchase.post.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-purchase#post-purchase-action-modal-)
* [pos.purchase.post.block.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-purchase#post-purchase-targets)
* [pos.return.post.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-return#post-return-action-modal-)
* [pos.return.post.block.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-return#post-return-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.
## Examples
### 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
### Control 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.
### Handle 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.
### Examples
* #### Select dates with a spinner
##### Description
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.
##### Default
```html
Show
```
* #### Control spinner visibility
##### Description
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.
##### Default
```jsx
<>
Select Date
console.log('Date selected:', event.currentTarget.value)}
/>
;
```
* #### Handle date selection events
##### 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.
##### Default
```jsx
console.log('Input:', event.currentTarget.value)}
onChange={(event) => console.log('Change:', event.currentTarget.value)}
onFocus={(event) => console.log('Focus')}
onBlur={(event) => console.log('Blur')}
/>
```
## Properties
Configure the following properties on the date spinner component.
* **id**
**string**
A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.
* **value**
**string**
**Default: ""**
The currently selected date value in [ISO 8601](https://en.wikipedia.org/wiki/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.
## Events
The date spinner component provides event callbacks for handling user interactions. Learn more about [handling events](https://shopify.dev/docs/api/polaris/using-polaris-web-components#handling-events).
* **blur**
**(event: CallbackEvent<"s-date-spinner">) => void**
Called when the element loses focus.
* **change**
**(event: CallbackEvent<"s-date-spinner">) => void**
Called after editing completes, typically on blur.
* **focus**
**(event: CallbackEvent<"s-date-spinner">) => void**
Called when the element receives focus.
* **input**
**(event: CallbackEvent<"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.
```ts
boolean
```
* cancelable
Whether the event can be canceled.
```ts
boolean
```
* composed
Whether the event will trigger listeners outside of a shadow root.
```ts
boolean
```
* currentTarget
The element that the event listener is attached to.
```ts
HTMLElementTagNameMap[T]
```
* detail
Additional data associated with the event.
```ts
any
```
* eventPhase
The current phase of the event flow.
```ts
number
```
* target
The element that triggered the event.
```ts
HTMLElementTagNameMap[T] | null
```
## Best 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](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/date-picker) provides faster navigation.
* **Provide interaction cues:** Consider labels or instructions to help first-time users understand the scrollable column interface.