Skip to content
Home

DatePicker

Info
Demos
Properties
Events

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