# DateField

This is a form field that lets users select a date using the DatePicker component.

```tsx
import React, { useState } from 'react';
import {
  render,
  DateField,
  type Selected
} from '@shopify/ui-extensions-react/admin';

render('Playground', () => <App />);

function App() {
  const [selected, setSelected] = useState<Selected>('2023-11-08')
  return (
    <DateField selected={selected} onChange={setSelected} />
  );
}

```

```js
import {extend, DateField} from '@shopify/ui-extensions/admin';

extend('Playground', (root) => {
  const dateField = root.createComponent(
    DateField,
    {},
    'DateField',
  );

  root.appendChild(dateField);
});

```

## DatePickerProps

### DatePickerProps

### defaultYearMonth

value: `{year: Year; month: Month} | YearMonthString`

  - Year: number
  - Month: number
  - YearMonthString: string
Default [uncontrolled](https://reactjs.org/docs/forms.html#controlled-components) year and month to display. Ignored when year/month navigation is [controlled](https://reactjs.org/docs/forms.html#controlled-components).

### disabled

value: `Disabled | Disabled[] | boolean`

  - Disabled: DateString | Range | Day
Disabled dates, days, and/or ranges, or the date picker. Unbound range disables all dates either from `start` date or to `end` date. `true` disables the date picker.

### onChange

value: `(selected: T) => void`

A callback that is run whenever a date is selected or unselected. This callback is called with a string, an array of strings or a range object representing the selected dates. This component is [controlled](https://reactjs.org/docs/forms.html#controlled-components), so you must store these values in state and reflect it back in the `selected` props.

### onYearMonthChange

value: `(yearMonth: { year: number; month: number; }) => void`

  - Month: number
A callback that is run whenever the month is changed. This callback is called with an object indicating the year/month the UI should change to. When year/month navigation is controlled you must store these values in state and reflect it back in the `yearMonth` prop.

### readOnly

value: `boolean`

Whether the date picker is read-only.

### selected

value: `T`

A date, an array of dates, or a range object with `start` and/or `end` keys indicating the selected dates. When a range is set, dates between the boundaries will be selected. Passed `undefined` or `string` allows user to select a single date, an empty array or an array of dates allows selecting multiple dates, an empty object or a Range object allows selecting a range of dates.

### yearMonth

value: `{year: Year; month: Month} | YearMonthString`

  - Year: number
  - Month: number
  - YearMonthString: string
[Controlled](https://reactjs.org/docs/forms.html#controlled-components) year and month to display. Use in combination with `onYearMonthChange`. Makes year/month navigation [controlled](https://reactjs.org/docs/forms.html#controlled-components).

### Range

### end

value: `DateString`

  - DateString: string
Last day (inclusive) of the selected range

### start

value: `DateString`

  - DateString: string
First day (inclusive) of the selected range

## Examples

This is a form field that lets users select a date using the DatePicker component.


Use this when users need to select multiple dates.

```tsx
import React from 'react';
import {
  render,
  DateField,
  type Selected,
} from '@shopify/ui-extensions-react/admin';

render('Playground', () => <App />);

function App() {
  const [selected, setSelected] = React.useState<Selected>(['2023-11-08']);
  
  return (
    <DateField selected={selected} onChange={setSelected} />
  );
}

```

```js
import {extend, DateField} from '@shopify/ui-extensions/admin';

extend('Playground', (root) => {
  const dateField = root.createComponent(
    DateField,
    { selected: ['2023-11-08'] },
    'DateField',
  );

  root.appendChild(dateField);
});

```


Use this when users need to select a range of dates.

```tsx
import React from 'react';
import {
  render,
  DateField,
  type Selected
} from '@shopify/ui-extensions-react/admin';

render('Playground', () => <App />);

function App() {
  const [selected, setSelected] = React.useState<Selected>({start: '2023-11-08', end: '2023-11-10' });

  return (
    <DateField selected={selected} onChange={setSelected} />
  );
}

```

```js
import {extend, DateField} from '@shopify/ui-extensions/admin';

extend('Playground', (root) => {
  const dateField = root.createComponent(
    DateField,
    { selected: {start: '2023-11-08', end: '2023-11-10' } },
    'DateField',
  );

  root.appendChild(dateField);
});

```

## Examples

This is a form field that lets users select a date using the DatePicker component.


Use this when users need to select multiple dates.

```tsx
import React from 'react';
import {
  render,
  DateField,
  type Selected,
} from '@shopify/ui-extensions-react/admin';

render('Playground', () => <App />);

function App() {
  const [selected, setSelected] = React.useState<Selected>(['2023-11-08']);
  
  return (
    <DateField selected={selected} onChange={setSelected} />
  );
}

```

```js
import {extend, DateField} from '@shopify/ui-extensions/admin';

extend('Playground', (root) => {
  const dateField = root.createComponent(
    DateField,
    { selected: ['2023-11-08'] },
    'DateField',
  );

  root.appendChild(dateField);
});

```


Use this when users need to select a range of dates.

```tsx
import React from 'react';
import {
  render,
  DateField,
  type Selected
} from '@shopify/ui-extensions-react/admin';

render('Playground', () => <App />);

function App() {
  const [selected, setSelected] = React.useState<Selected>({start: '2023-11-08', end: '2023-11-10' });

  return (
    <DateField selected={selected} onChange={setSelected} />
  );
}

```

```js
import {extend, DateField} from '@shopify/ui-extensions/admin';

extend('Playground', (root) => {
  const dateField = root.createComponent(
    DateField,
    { selected: {start: '2023-11-08', end: '2023-11-10' } },
    'DateField',
  );

  root.appendChild(dateField);
});

```