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 prop 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 prop 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 prop 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. |
locale | (optional) to define the locale used in the calendar. Needs to be an date-fnsv2 locale object, like import enLocale from 'date-fns/locale/en-GB'. Defaults to nb-NO. |
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 not should 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. |
globalStatus | (optional) the configuration used for the target GlobalStatus. |
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. |
Shortcuts
You may use date-fns to make date calculations.
With range enabled.