title: 'Datepicker' status: 'stable' isNew: true 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

import { Datepicker } from '@contentful/f36-components';
// or
import { Datepicker } from '@contentful/f36-datepicker';

Examples

Basic

Display Datepicker component with text input

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

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!"

Wrapped in FormControl

You can use Datepicker with the FormControl in order to enhance layout with input label, help text or validation message.

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.

Multiple months

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

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.

Custom

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

Props (API reference)

Accessibility

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