DatePicker

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.

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'
},
{
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"
/>