---
title: 'Datepicker'
status: 'stable'
slug: /components/datepicker/
github: 'https://github.com/contentful/forma-36/tree/main/packages/components/datepicker'
storybook: 'https://f36-storybook.contentful.com/?path=/story/components-datepicker'
typescript: ./src/Datepicker.tsx
section: 'dateComponents'
---

Datepicker component enables users to enter a date either through text input or selecting a date from the Calendar dropdown.

The Datepicker component combines text input, and calendar in dropdown.

Use Datepicker to ask user's for date input in forms, modals, or filtering.

## Import

```jsx static=true
import { Datepicker } from '@contentful/f36-components';
// or
import { Datepicker } from '@contentful/f36-datepicker';
```

## Examples

### Basic

Display Datepicker component with text input

```jsx file=./examples/Datepicker/Basic.tsx

```

### Date Formats

Datepicker supports printing out different formats to users, see https://date-fns.org/v2.16.1/docs/format

At Contentful we use `dd LLL yyyy` format to communicate date to users, example `31 Jan 2021`

```jsx file=./examples/Datepicker/Format.tsx

```

### Visual States

Visual states indicates to users certain messages through UI.

Communicate to the users in text why the Datepicker is in a specific state, example:

Disabled: "You don't have access to edit this field!"
Invalid: "Please enter a valid date!"

```jsx file=./examples/Datepicker/VisualStates.tsx

```

### Wrapped in FormControl

You can use Datepicker with the [FormControl](/components/form-control) in order to enhance layout with input label, help text or validation message.

```jsx file=./examples/Datepicker/WithFormControl.tsx

```

### Limiting the date range

Set mininum and/or maximum dates to limit users to choose from a specific period in time.

Use the `fromDate` and `toDate` properties to control time frames.

```jsx file=./examples/Datepicker/LimitingTheDateRange.tsx

```

### Multiple months

If you need to show more than a month at once, use the `numberOfMonths` property.

```jsx file=./examples/Datepicker/WithMultipleMonths.tsx

```

### Custom placeholder

To replace default placeholder with your custom one, use the `placeholder` property.

```jsx file=./examples/Datepicker/Placeholder.tsx

```

### Open by default

Use the `defaultIsOpen` property to open the dropdown and display the Calendar by default without user interaction.

**Note**: the Calendar closes by pressing the escape key or by clicking outside of the Datepicker.

```jsx file=./examples/Datepicker/DefaultOpen.tsx

```

### Custom

If you need a custom solution, you can build it by leveraging our lower-level components, such as [Calendar](/components/calendar), [Popover](/components/popover), and [TextInput](/components/text-input).
For example, Datepicker that uses text input as a trigger without a button.

```jsx file=./examples/Datepicker/Custom.tsx

```

## Props (API reference)

<PropsTable of="Datepicker" />

## Accessibility

- Keyboard navigation is supported
- Necessary aria roles are provided by default
- When providing a label, ensure it's linked to the text input