DatePicker

Description

The DatePicker component should be used whenever there is to enter a single date or a date range/period with a start and end date.

Date Object

The DatePicker operates with a default JavaScript Date instance as well as string (ISO 8601) like start_date="2019-05-05" (yyyy-MM-dd).

For more DatePicker examples, have a look at this CodeSandbox.

Demos

English (US) is not included in Eufemia by default. You can include it like:

import enUS from '@dnb/eufemia/shared/locales/en-US'
<EufemiaProvider locales={enUS} ...>
App
</EufemiaProvider>

Range DatePicker

DatePicker:

Default DatePicker

DatePicker:

Default DatePicker with Input

DatePicker:

Hidden Nav:

DatePicker:

Show month only

DatePicker:

Disabled with info message

Please select a valid date
DatePicker:

With suffix

DatePicker:

Linked DatePickers

DatePicker:

DatePicker with error status

Please select a valid date
DatePicker:

DatePicker with error

Please select a valid date
DatePicker:

DatePicker with error status

DatePicker:

Opened DatePicker

Also used for screenshot tests.