---
title: DateField
description: Captures date input from merchants. Provides a consistent interface for date selection, with proper validation.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsforms/datefield
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsforms/datefield.md
---

# Date​Field

Captures date input from merchants. Provides a consistent interface for date selection, with proper validation.

## Properties

* details

  string

  Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user.

  This will also be exposed to screen reader users.

* disabled

  boolean

  Default: false

  Disables the field, disallowing any interaction.

* error

  string

  Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.

* id

  string

  A unique identifier for the element.

* label

  string

  Content to use as the field label.

* value

  string

  The current value for the field. If omitted, the field will be empty.

## Events

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

* blur

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

  Callback when the element loses focus.

* change

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

  Callback after editing completes (typically on blur).

* focus

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

  Callback when the element receives focus.

* input

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

  Callback when the user makes any changes in the field.

### 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-date-field 
    label="Date" 
    value="2025-10-08"
  />
  ```

## Preview

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

## Examples

DateField usage patterns

### Examples

* #### Event handling

  ##### Description

  Handle date input events

  ##### Default

  ```jsx
  <s-date-field 
    label="Order date"
    value="2024-10-26"
    onInput={(event) => console.log('Input:', event.currentTarget.value)}
    onChange={(event) => console.log('Change:', event.currentTarget.value)}
    onFocus={(event) => console.log('Focused with:', event.currentTarget.value)}
    onBlur={(event) => console.log('Blurred with:', event.currentTarget.value)}
  />
  ```