Migrate to the Polaris date field component

The Polaris date field component provides a text input with a calendar picker for selecting dates. It replaces the previous DateField component and is available as <s-date-field> in API versions 2025-10 and newer.

Anchor to Updated propertiesUpdated properties

The following properties are different in the Polaris date field component.

Anchor to readonlyreadonly

The previous DateField readonly prop is now called readOnly (camelCase).

Anchor to yearMonthyearMonth

The previous DateField yearMonth prop is now called view. It takes a YYYY-MM string instead of a {year, month} object.

Anchor to defaultYearMonthdefaultYearMonth

The previous DateField defaultYearMonth prop is now called defaultView. It takes a YYYY-MM string.

Anchor to disableddisabled

The previous disabled prop behavior has changed. Setting disabled to true still disables the entire field. For disabling specific dates or days, use the new disallow and disallowDays props.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-date-field
      label="Select delivery date"
      defaultValue="2024-12-15"
      disallowDays="saturday,sunday"
    />
  );
}

import {
  reactExtension,
  DateField,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <DateField
      label="Select delivery date"
      value="2024-12-15"
      disabled={['Saturday', 'Sunday']}
    />
  );
}

Anchor to onYearMonthChangeonYearMonthChange

The previous onYearMonthChange prop is now called onViewChange.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-date-field
      label="Select date"
      defaultValue="2024-12-15"
      view="2024-12"
      onViewChange={(event) => console.log('View changed', event)}
    />
  );
}

import {
  reactExtension,
  DateField,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <DateField
      label="Select date"
      value="2024-12-15"
      yearMonth={{year: 2024, month: 12}}
      onYearMonthChange={({year, month}) =>
        console.log('View changed', year, month)
      }
    />
  );
}

Anchor to Removed propertiesRemoved properties

The following properties aren't supported:

• placeholder — no longer supported, use label instead.

Anchor to New propertiesNew properties

The Polaris date field component introduces the following new properties: