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.

Validation for minDate, maxDate and invalid dates

Field.Date has built in valdation for minDate, maxDate and invalid dates. This is the preffered method of handling scenarios where the user has typed in an invalid date, or a date outside of the set date limits. Automatically changing the user input on the other hand, leads to worse UX, and confusion, as the user might not understand why the date is changed, for seemingly no reason. So it's best practice to actually tell the user what is wrong, and let them correct it.

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 />

Year navigation

Code Editor
<DatePicker showInput yearNavigation />

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
/>