---
title: DateSpinner
description: Allows merchants to select a specific date, using a spinner interface.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsforms/datespinner
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsforms/datespinner.md
---

# Date​Spinner

Allows merchants to select a specific date, using a spinner interface.

## Properties

* id

  string

  A unique identifier for the element.

* value

  string

  Default: ""

  Current selected value for the spinner.

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

## Events

Learn more about registering [events](https://shopify.dev/docs/api/pos-ui-extensions/using-polaris-components#events)

* blur

  (event: CallbackEvent<"s-date-spinner">) => void

  Callback when the date spinner is dismissed.

* change

  (event: CallbackEvent<"s-date-spinner">) => void

  Callback when the value changes. Only called when a different value is selected.

* focus

  (event: CallbackEvent<"s-date-spinner">) => void

  Callback when the date spinner is revealed.

* input

  (event: CallbackEvent<"s-date-spinner">) => void

  Callback when the user makes a selection.

### CallbackEvent

* bubbles

  ```ts
  boolean
  ```

* cancelable

  ```ts
  boolean
  ```

* composed

  ```ts
  boolean
  ```

* currentTarget

  ```ts
  HTMLElementTagNameMap[T]
  ```

* detail

  ```ts
  any
  ```

* eventPhase

  ```ts
  number
  ```

* target

  ```ts
  HTMLElementTagNameMap[T] | null
  ```

```ts
interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
  currentTarget: HTMLElementTagNameMap[T];
  bubbles?: boolean;
  cancelable?: boolean;
  composed?: boolean;
  detail?: any;
  eventPhase: number;
  target: HTMLElementTagNameMap[T] | null;
}
```

### Examples

* #### Code

  ##### Default

  ```html
  <s-button command="--show" commandFor="date-spinner">
    Show
  </s-button>
  <s-date-spinner
    id="date-spinner"
    value="2021-09-17" 
  />
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/date-spinner-default.png)

## Examples

DateSpinner usage patterns

### Examples

* #### Command system

  ##### Description

  Show and hide DateSpinner using button commands

  ##### Default

  ```jsx
  <>
    <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)}
    />
  </>;
  ```

* #### Event handling

  ##### Description

  Handle date selection events

  ##### Default

  ```jsx
  <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')}
  />
  ```