Skip to content

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

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