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:

<DatePicker

  label="DatePicker:"

  start_date="2019-04-01"

  end_date="2019-05-17"

  range={true}

  show_input={true}

  on_change={({ start_date, end_date }) => {

    console.log('on_change', start_date, end_date)

  }}

  on_submit={({ start_date, end_date }) => {

    console.log('on_submit', start_date, end_date)

  }}

  on_cancel={({ start_date, end_date }) => {

    console.log('on_cancel', 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:

<DatePicker

  label="DatePicker:"

  date="2019-05-05"

  return_format="dd-MM-yyyy"

  on_change={({ date }) => {

    console.log('on_change', date)

  }}

  on_show={({ date }) => {

    console.log('on_show', date)

  }}

/>

Default DatePicker with Input

DatePicker:

<DatePicker

  label="DatePicker:"

  date={new Date()}

  show_input={true}

  show_cancel_button={true}

  show_reset_button={true}

  on_change={({ date }) => {

    console.log('on_change', date)

  }}

  on_cancel={({ date }) => {

    console.log('on_cancel', date)

  }}

/>

Hidden Nav:

DatePicker:

<DatePicker

  label="DatePicker:"

  date="2022/05/05"

  min_date="2022/05/01"

  max_date="2022/05/17"

  date_format="yyyy/MM/dd"

  return_format="dd/MM/yyyy"

  hide_navigation={true}

  hide_days={true}

  on_change={({ date }) => {

    console.log('on_change', date)

  }}

  on_hide={({ date }) => {

    console.log('on_hide', date)

  }}

/>

Show month only

DatePicker:

<DatePicker

  label="DatePicker:"

  date="05/02/2019"

  date_format="MM/dd/yyyy"

  only_month={true}

/>

Disabled with info message

Please select a valid date
DatePicker:

<DatePicker

  label="DatePicker:"

  date={new Date()}

  show_input={true}

  status="Please select a valid date"

  status_state="info"

/>

With suffix

DatePicker:

<DatePicker

  label="DatePicker:"

  date={new Date()}

  show_input

  suffix={<HelpButton title="Modal Title">Modal content</HelpButton>}

/>

Linked DatePickers

DatePicker:

<DatePicker label="DatePicker:" range link show_input />

DatePicker with error status

Please select a valid date
DatePicker:

<DatePicker

  label="DatePicker:"

  date="2019-05-05"

  hide_navigation={true}

  status="Please select a valid date"

/>

DatePicker with error

Status message with HTML inside
DatePicker:

<DatePicker

  label="DatePicker:"

  date="2019-05-05"

  show_input={true}

  show_submit_button={true}

  stretch={true}

  status={

    <span>

      Status message with <b>HTML</b> inside

    </span>

  }

/>

DatePicker with error status

DatePicker:

<DatePicker

  label="DatePicker:"

  date={new Date()}

  hide_navigation={true}

  status="error"

/>

Opened DatePicker

Also used for screenshot tests.

<DatePicker

  opened={true}

  prevent_close={true}

  disable_autofocus={true}

  range={true}

  start_date="2019-05-05"

  end_date="2019-06-05"

/>