DatePicker

Properties

Properties	Description
`date`	(optional) defines the pre-filled date by either a JavaScript DateInstance or (ISO 8601) like `date="2019-05-05"`.
`start_date`	(optional) to set the pre-filled starting date. Is used if `range={true}` is set to `true`. Defaults to `null`, showing the `mask_placeholder`.
`end_date`	(optional) to set the pre-filled ending date. Is used if `range={true}` is set to `true`. Defaults to `null`, showing the `mask_placeholder`.
`month`	(optional) to display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`.
`start_month`	(optional) to display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`.
`end_month`	(optional) to display what month should be shown in the second calendar by default. Defaults to the `date` respective `start_date`.
`min_date`	(optional) to limit a date range to a minimum `start_date`. Defaults to `null`.
`max_date`	(optional) to limit a date range to a maximum `end_date`. Defaults to `null`.
`date_format`	(optional) Defines how the property dates (`date`, `start_date` and `end_date`) should be parsed, e.g. `yyyy/MM/dd`. Defaults to `yyyy-MM-dd`.
`return_format`	(optional) Defines how the returned date, as a string, should be formatted as. Defaults to `yyyy-MM-dd`.
`range`	(optional) if the date picker should support a range of two dates (starting and ending date). Defaults to `false`.
`show_input`	(optional) if the input fields with the mask should be visible. Defaults to `false`.
`mask_order`	(optional) to define the order of the masked placeholder input fields. Defaults to `dd/mm/yyyy`
`opened`	(optional) to open the date-picker by default. Defaults to `false`.
`mask_placeholder`	(optional) to display the placeholder on input. Defaults to `dd/mm/åååå`.
`hide_navigation`	(optional) if set to `true`, the navigation will be hidden. Defaults to `false`.
`hide_days`	(optional) if set to `true`, the week days will be hidden. Defaults to `false`.
`show_submit_button`	(optional) if set to `true`, a submit button will be shown. You can change the default text by using `submit_button_text="Ok"`. Defaults to `false`. If the `range` property is `true`, then the submit button is shown.
`show_cancel_button`	(optional) if set to `true`, a cancel button will be shown. You can change the default text by using `cancel_button_text="Avbryt"` Defaults to `false`. If the `range` property is `true`, then the cancel button is shown.
`show_reset_button`	(optional) if set to `true`, a reset button will be shown. You can change the default text by using `reset_button_text="Tilbakestill"` Defaults to `false`.
`link`	(optional) link both calendars, once to the user is navigating between months. Only meant to use if the range is set to `true`. Defaults to `false`.
`sync`	(optional) sync input values with the calendars views. Once the input values get changed, the calendar changes its views in sync. Defaults to `true`.
`first_day`	(optional) to define the first day of the week. Defaults to `monday`.
`align_picker`	(optional) use `right` to change the calendar alignment direction. Defaults to `left`.
`only_month`	(optional) use `true` to only show the defined month. Disables the month navigation possibility. Defaults to `false`.
`hide_last_week`	(optional) use `true` to only show the last week in the current month if it needs to be shown. The result is that there will mainly be shows five (5) weeks (rows) instead of six (6). Defaults to `false`.
`stretch`	(optional) if set to `true`, then the date-picker input field will be 100% in `width`.
`label`	(optional) a prepending label in sync with the date input field.
`label_direction`	(optional) use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.
`suffix`	(optional) text describing the content of the DatePicker more than the label. You can also send in a React component, so it gets wrapped inside the DatePicker component.
`label_sr_only`	(optional) use `true` to make the label only readable by screen readers.
`shortcuts`	(optional) gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info is below.
`addon_element`	(optional) gives you the possibility to inject a React element showing up over the footer. Use it to customize `shortcuts`.
`input_element`	(optional) gives you the possibility to use a plain/vanilla `<input />` HTML element by defining it as a string `input_element="input"`, a React element, or a render function `input_element={(internalProps) => (<Return />)}`. Can also be used in circumstances where the `react-text-mask` should not be used, e.g. in testing environments. Defaults to custom masked input.
`status`	(optional) text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
`status_state`	(optional) defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
`status_props`	(optional) use an object to define additional FormStatus properties.
`disable_autofocus`	(optional) once the date picker gets opened, there is a focus handling to ensure good accessibility. This can be disabled with this property. Defaults to `false`.
`correct_invalid_date`	(optional) corrects the input date value to be the same as either `min_date` or `max_date`, when the user types in a date that is either before or after one of these. Defaults to `false`.
`globalStatus`	(optional) the configuration used for the target GlobalStatus.
`tooltip`	(optional) Provide a short Tooltip content that shows up on the picker button.
`skeleton`	(optional) if set to `true`, an overlaying skeleton with animation will be shown.
`size`	(optional) the sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`.
Space	(optional) spacing properties like `top` or `bottom` are supported.

Translations

More info about translations can be found in the general localization and Eufemia Forms localization docs.

Key	nb-NO	en-GB
`DatePicker.day`	dag	Day
`DatePicker.month`	måned	Month
`DatePicker.year`	år	Year
`DatePicker.start`	fra	from
`DatePicker.end`	til	to
`DatePicker.selected_date`	Valgt dato: %s	Selected date: %s
`DatePicker.selected_month`	Valgt måned %s	Selected month %s
`DatePicker.selected_year`	Valgt år %s	Selected year %s
`DatePicker.next_month`	Neste måned %s	Next month %s
`DatePicker.prev_month`	Forrige måned %s	Previous month %s
`DatePicker.next_year`	Neste år %s	Next year %s
`DatePicker.prev_year`	Forrige år %s	Previous year %s
`DatePicker.open_picker_text`	åpne datovelger	Open date picker
`DatePicker.mask_order`	dd/mm/yyyy	dd/mm/yyyy
`DatePicker.mask_placeholder`	dd.mm.åååå	dd/mm/yyyy
`DatePicker.date_format`	yyyy-MM-dd	yyyy-MM-dd
`DatePicker.return_format`	yyyy-MM-dd	yyyy-MM-dd
`DatePicker.submit_button_text`	Ok	OK
`DatePicker.cancel_button_text`	Avbryt	Cancel
`DatePicker.reset_button_text`	Tilbakestill	Reset
`DatePicker.placeholder_characters.day`	d	d
`DatePicker.placeholder_characters.month`	m	m
`DatePicker.placeholder_characters.year`	å	y

Shortcuts

You may use date-fns to make date calculations.

Code Editor<DatePicker
  shortcuts={[
    {
      title: 'Set date',
      date: '1969-07-15',
    },
    {
      title: 'Relative +3 days',
      date: ({ date }) => date && addDays(date, 3),
    },
  ]}
/>

With range enabled.

Code Editor<DatePicker
  shortcuts={[
    {
      title: 'Set date period',
      start_date: '1969-07-15',
      end_date: '1969-07-15',
      close_on_select: true, // will close the picker
    },
    {
      title: 'This month',
      start_date: startOfMonth(new Date()),
      end_date: lastDayOfMonth(new Date()),
    },
  ]}
/>

#DatePicker

#Properties

#Translations

#Shortcuts

DatePicker

Properties

Translations

Shortcuts