Skip to content
Home

DatePicker

Info
Demos
Properties
Events

Import

import { DatePicker } from '@dnb/eufemia'

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.

Translations and date formatting

The DatePicker uses date-fns to format date texts in the calendar, i.e. the month and weekday names. Currently, the DatePicker only supports nb-NO, en-GB, en-US and sv-SE locales, so it will fallback to use nb-NO as default if you set the locale prop on the Provider to be something other than the locales supported by the DatePicker.

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 locale={enUS} ...>
	App
</EufemiaProvider>

Range DatePicker

DatePicker

Code Editor
<DatePicker
  label="DatePicker"
  startDate="2019-04-01"
  endDate="2019-05-17"
  range={true}
  showInput={true}
  onChange={({ start_date, end_date }) => {
    console.log('onChange', start_date, end_date)
  }}
  onSubmit={({ start_date, end_date }) => {
    console.log('onSubmit', start_date, end_date)
  }}
  onCancel={({ start_date, end_date }) => {
    console.log('onCancel', start_date, end_date)
  }}
  onBlur={({ start_date, end_date, partialStartDate, partialEndDate }) => {
    console.log('onBlurPartial', partialStartDate, partialEndDate)
    console.log('onBlurcomplete', start_date, end_date)
  }}
  shortcuts={[
    {
      title: 'Set date period',
      start_date: '1969-07-15',
      end_date: '1969-08-15',
    },
    {
      title: 'Today',
      start_date: new Date(),
    },
    {
      title: 'This week',
      start_date: startOfWeek(new Date()),
      end_date: lastDayOfWeek(new Date()),
    },
    {
      close_on_select: true,
      title: 'This month',
      start_date: startOfMonth(new Date()),
      end_date: lastDayOfMonth(new Date()),
    },
    {
      title: 'Relative +3 days',
      start_date: ({ start_date }) => start_date || new Date(),
      end_date: ({ end_date }) => addDays(end_date || new Date(), 3),
    },
  ]}
/>

Default DatePicker

DatePicker

Code Editor
<DatePicker
  label="DatePicker"
  date="2019-05-05"
  returnFormat="dd-MM-yyyy"
  onChange={({ date }) => {
    console.log('onChange', date)
  }}
  onShow={({ date }) => {
    console.log('onShow', date)
  }}
  onBlur={({ start_date, end_date }) => {
    console.log('onBlur', start_date, end_date)
  }}
/>

Default DatePicker with Input

DatePicker

Code Editor
<DatePicker
  label="DatePicker"
  date={new Date()}
  showInput={true}
  showCancelButton={true}
  showResetButton={true}
  onChange={({ date }) => {
    console.log('onChange', date)
  }}
  onCancel={({ date }) => {
    console.log('onCancel', date)
  }}
  onBlur={({ date }) => {
    console.log('onBlur', date)
  }}
/>

Hidden Nav:

DatePicker

Code Editor
<DatePicker
  label="DatePicker"
  date="2022/05/05"
  minDate="2022/05/01"
  maxDate="2022/05/17"
  dateFormat="yyyy/MM/dd"
  returnFormat="dd/MM/yyyy"
  hideNavigation={true}
  hideDays={true}
  onChange={({ date }) => {
    console.log('onChange', date)
  }}
  onHide={({ date }) => {
    console.log('onHide', date)
  }}
  onBlur={({ date }) => {
    console.log('onBlur', date)
  }}
/>

Show days in a specific month

DatePicker

Code Editor
<DatePicker
  label="DatePicker"
  date="05/02/2019"
  dateFormat="MM/dd/yyyy"
  onlyMonth={true}
/>

With info message

Please select a valid date
DatePicker

Code Editor
<DatePicker
  label="DatePicker"
  date={new Date()}
  showInput={true}
  status="Please select a valid date"
  statusState="info"
/>

With suffix

DatePicker

Code Editor
<DatePicker
  label="DatePicker"
  date={new Date()}
  showInput
  suffix={<HelpButton title="Modal Title">Modal content</HelpButton>}
/>

Linked DatePickers

DatePicker

Code Editor
<DatePicker label="DatePicker" range link showInput />

Min and Max date correction

The correctInvalidDate property is not on by default, as it can be confusing to screen reader users, when the value they type in changes, for seemingly no reason to them. For built in validation, use Field.Date

Code Editor
<DatePicker
  showInput
  minDate="2024-11-01"
  maxDate="2024-12-31"
  correctInvalidDate
/>

DatePicker with error status (no input)

Please select a valid date
DatePicker

Code Editor
<DatePicker
  label="DatePicker"
  date="2019-05-05"
  hideNavigation={true}
  status="Please select a valid date"
/>

DatePicker with error

Status message with HTML inside
DatePicker

Code Editor
<DatePicker
  label="DatePicker"
  date="2019-05-05"
  showInput={true}
  showSubmitButton={true}
  stretch={true}
  status={
    <span>
      Status message with <b>HTML</b> inside
    </span>
  }
/>

DatePicker with error status

DatePicker

Code Editor
<DatePicker
  label="DatePicker"
  date={new Date()}
  hideNavigation={true}
  status="error"
/>

Opened DatePicker

Code Editor
<DatePicker
  opened={true}
  preventClose={true}
  disableAutofocus={true}
  range={true}
  startDate="2019-05-05"
  endDate="2019-06-05"
  skipPortal
/>