@spark-web/date-picker/README.md

--- title: DatePicker storybookPath: forms-date-picker isExperimentalPackage: true ---

---
title: DatePicker
storybookPath: forms-date-picker
isExperimentalPackage: true
---

The `DatePicker` component allows users to either manually enter a date in
`dd/MM/yyyy` format or use the calendar button to render a month view that users
can pick from. Clicking on a date will fill in the input for that date in the
correct format.

## Example

```jsx live
const [value, setValue] = React.useState();

return (
  <Field label="Select date">
    <DatePicker value={value} onChange={setValue} />
  </Field>
);
```

## Props

<PropsTable displayName="DatePicker" />

The component passes props into its underlying [TextInput](/package/text-input)
component and are not listed here.

Inside `ContentDialog`, the calendar is portalled to its unclipped layer within
the dialog focus boundary. Elsewhere it remains inline for compatibility. Pass
`calendarPortalTarget` to escape another clipping container, or
`calendarPortalTarget={null}` to force inline rendering.