---
title: DatePicker
description: Allows merchants to select a specific date, using a calendar-like picker 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/datepicker
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsforms/datepicker.md
---

# Date​Picker

Allows merchants to select a specific date, using a calendar-like picker interface.

## Properties

* id

  string

  A unique identifier for the element.

* value

  string

  Default: ""

  Current selected value.

  The default means no date is selected.

  If the provided value is invalid, no date is selected.

  Otherwise:

  * If `type="single"`, this is a date in `YYYY-MM-DD` format.
  * If `type="multiple"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.
  * If `type="range"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.

## Events

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

* blur

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

  Callback when the date picker is dismissed.

* change

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

  Callback when the user selects a date from the picker that is different to the current value.

* focus

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

  Callback when the date picker is revealed.

* input

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

  Callback when the user selects a date from the picker.

### 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-picker">
    Show
  </s-button>
  <s-date-picker 
    id="date-picker" 
    value="2025-10-08"
  />
  ```

## Preview

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

## Examples

DatePicker usage patterns

### Examples

* #### Command system

  ##### Description

  Show and hide DatePicker using button commands

  ##### Default

  ```jsx
  <>
    <s-button command="--show" commandFor="date-picker">
      Select Date
    </s-button>
    <s-date-picker
      id="date-picker"
      value="2024-10-26"
      onChange={(event) => console.log('Date selected:', event.currentTarget.value)}
    />
  </>;
  ```

* #### Event handling

  ##### Description

  Handle date selection events

  ##### Default

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