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={({ startDate, endDate }) => {
    console.log('onChange', startDate, endDate)
  }}
  onSubmit={({ startDate, endDate }) => {
    console.log('onSubmit', startDate, endDate)
  }}
  onCancel={({ startDate, endDate }) => {
    console.log('onCancel', startDate, endDate)
  }}
  onBlur={({ startDate, endDate, partialStartDate, partialEndDate }) => {
    console.log('onBlurPartial', partialStartDate, partialEndDate)
    console.log('onBlurComplete', startDate, endDate)
  }}
  shortcuts={[
    {
      title: 'Set date period',
      startDate: '1969-07-15',
      endDate: '1969-08-15',
    },
    {
      title: 'Today',
      startDate: new Date(),
    },
    {
      title: 'This week',
      startDate: startOfWeek(new Date()),
      endDate: lastDayOfWeek(new Date()),
    },
    {
      closeOnSelect: true,
      title: 'This month',
      startDate: startOfMonth(new Date()),
      endDate: lastDayOfMonth(new Date()),
    },
    {
      title: 'Relative +3 days',
      startDate: ({ startDate }) => startDate || new Date(),
      endDate: ({ endDate }) => addDays(endDate || 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={({ startDate, endDate }) => {
    console.log('onBlur', startDate, endDate)
  }}
/>

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