--- title: DateField description: Allow users to select a specific date with a date picker. api_version: 2025-10 api_name: checkout-ui-extensions source_url: html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/forms/datefield md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/forms/datefield.md --- # Date​Field Allow users to select a specific date with a date picker. ## Properties * allow string Default: "" Dates that can be selected. A comma-separated list of dates, date ranges. Whitespace is allowed after commas. The default `''` allows all dates. * Dates in `YYYY-MM-DD` format allow a single date. * Dates in `YYYY-MM` format allow a whole month. * Dates in `YYYY` format allow a whole year. * Ranges are expressed as `start--end`. - Ranges are inclusive. * If either `start` or `end` is omitted, the range is unbounded in that direction. * If parts of the date are omitted for `start`, they are assumed to be the minimum possible value. So `2024--` is equivalent to `2024-01-01--`. * If parts of the date are omitted for `end`, they are assumed to be the maximum possible value. So `--2024` is equivalent to `--2024-12-31`. * Whitespace is allowed either side of `--`. * allowDays string Default: "" Days of the week that can be selected. These intersect with the result of `allow` and `disallow`. A comma-separated list of days. Whitespace is allowed after commas. The default `''` has no effect on the result of `allow` and `disallow`. Days are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`. * autocomplete AutocompleteField | \`${AutocompleteSection} ${AutocompleteField}\` | \`${AutocompleteGroup} ${AutocompleteField}\` | \`${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}\` | "on" | "off" Default: 'on' for everything else A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill. * defaultValue string The default value for the field. * defaultView string Default month to display in `YYYY-MM` format. This value is used until `view` is set, either directly or as a result of user interaction. Defaults to the current month in the user's locale. * disabled boolean Default: false Disables the field, disallowing any interaction. * disallow string Default: "" Dates that cannot be selected. These subtract from `allow`. A comma-separated list of dates, date ranges. Whitespace is allowed after commas. The default `''` has no effect on `allow`. * Dates in `YYYY-MM-DD` format disallow a single date. * Dates in `YYYY-MM` format disallow a whole month. * Dates in `YYYY` format disallow a whole year. * Ranges are expressed as `start--end`. - Ranges are inclusive. * If either `start` or `end` is omitted, the range is unbounded in that direction. * If parts of the date are omitted for `start`, they are assumed to be the minimum possible value. So `2024--` is equivalent to `2024-01-01--`. * If parts of the date are omitted for `end`, they are assumed to be the maximum possible value. So `--2024` is equivalent to `--2024-12-31`. * Whitespace is allowed either side of `--`. * disallowDays string Default: "" Days of the week that cannot be selected. This subtracts from `allowDays`, and intersects with the result of `allow` and `disallow`. A comma-separated list of days. Whitespace is allowed after commas. The default `''` has no effect on `allowDays`. Days are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`. * 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. * name string An identifier for the field that is unique within the nearest containing form. * readOnly boolean Default: false The field cannot be edited by the user. It is focusable will be announced by screen readers. * required boolean Default: false Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property. * value string The current value for the field. If omitted, the field will be empty. * view string Displayed month in `YYYY-MM` format. `onViewChange` is called when this value changes. Defaults to `defaultView`. ### AutocompleteSection The “section” scopes the autocomplete data that should be inserted to a specific area of the page. Commonly used when there are multiple fields with the same autocomplete needs in the same page. For example: 2 shipping address forms in the same page. ```ts `section-${string}` ``` ### AutocompleteGroup The contact information group the autocomplete data should be sourced from. ```ts "shipping" | "billing" ``` ## Events * blur ((event: CallbackEventListener\) => void) | null Callback when the element loses focus. * change ((event: CallbackEventListener\) => void) | null Callback when the user has **finished editing** a field, e.g. once they have blurred the field. * focus ((event: CallbackEventListener\) => void) | null Callback when the element receives focus. * input ((event: CallbackEventListener\) => void) | null Callback when the user makes any changes in the field. * invalid ((event: CallbackEventListener\) => void) | null Callback when the user enters an invalid date. * viewChange ((event: CallbackEventListener\) => void) | null Callback when the view changes. ### CallbackEventListener ```ts (EventListener & { (event: CallbackEvent): void; }) | null ``` ### CallbackEvent ```ts TEvent & { currentTarget: HTMLElementTagNameMap[TTagName]; } ``` ### Examples * #### Code ##### Default ```html ``` ## Preview ![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/date-field-default.png)