Properties
Field-specific properties
| Property | Type | Description |
|---|---|---|
range | boolean | (optional) Defines if the Date field should support a value of two dates (starting and ending date). The value needs to be a string containing two dates, separated by a pipe character (|) (01-09-2024|30-09-2024) when this is set to true. Defaults to false. |
showInput | boolean | (optional) If the input fields with the mask should be visible. Defaults to true. |
showCancelButton | boolean | (optional) If set to true, a cancel button will be shown. You can change the default text by using cancelButtonText="Avbryt" Defaults to true. If the range property is true, then the cancel button is shown. |
showResetButton | boolean | (optional) If set to true, a reset button will be shown. You can change the default text by using resetButtonText="Tilbakestill" Defaults to true. |
size | string | (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. Consider rather setting field sizes with Form.Appearance. |
month | string Date | (optional) To display what month should be shown in the first calendar by default. Defaults to the date respective startDate. |
startMonth | string Date | (optional) To display what month should be shown in the first calendar by default. Defaults to the date respective startDate. |
endMonth | string Date | (optional) To display what month should be shown in the second calendar by default. Defaults to the date respective startDate. |
minDate | string Date | (optional) To limit a date range to a minimum startDate. Defaults to null. |
maxDate | string Date | (optional) To limit a date range to a maximum endDate. Defaults to null. |
dateFormat | string | (optional) Defines how the property dates (date, startDate and endDate) should be parsed, e.g. yyyy/MM/dd. Defaults to yyyy-MM-dd. |
returnFormat | string | (optional) Defines how the returned date, as a string, should be formatted as. Defaults to yyyy-MM-dd. |
maskOrder | string | (optional) To define the order of the masked placeholder input fields. Defaults to dd/mm/yyyy. |
opened | boolean | (optional) To open the date-picker by default. Defaults to false. |
maskPlaceholder | string | (optional) To display the placeholder on input. Defaults to dd/mm/åååå. |
hideNavigation | boolean | (optional) If set to true, the navigation will be hidden. Defaults to false. |
hideDays | boolean | (optional) If set to true, the week days will be hidden. Defaults to false. |
showSubmitButton | boolean | (optional) If set to true, a submit button will be shown. You can change the default text by using submitButtonText="Ok". Defaults to false. If the range property is true, then the submit button is shown. |
link | boolean | (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 | boolean | (optional) Sync input values with the calendars views. Once the input values get changed, the calendar changes its views in sync. Defaults to true. |
firstDay | monday tuesday wednesday thursday friday saturday sunday | (optional) To define the first day of the week. Defaults to monday. |
alignPicker | string | (optional) Use right to change the calendar alignment direction. Defaults to left. |
skipPortal | boolean | (optional) If set to true, the calendar will not be rendered inside a react portal. Defaults to false. |
yearNavigation | boolean | (optional) Will enable year navigation in the calendar if set to true. Defaults to false. |
onlyMonth | boolean | (optional) Use true to only show the defined month. Disables the month navigation possibility. Defaults to false. |
hideLastWeek | boolean | (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. |
shortcuts | object | (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. |
addonElement | object | (optional) Gives you the possibility to inject a React element showing up over the footer. Use it to customize shortcuts. |
disableAutofocus | boolean | (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. |
onBlurValidator | function | (optional) Custom validator function that is triggered when the user leaves a field (e.g., blurring a text input or closing a dropdown). The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }. Defaults to validating invalid dates, and dates against minDate and maxDate, using dateValidator. Can be disabled using false. |
General properties
| Property | Type | Description |
|---|---|---|
value | string | (optional) Source data value for the field. Will take precedence over the path value given in the data context. |
defaultValue | string | (optional) Default source data value for the field. Will not take precedence over the path value given in the data context. |
path | string | (optional) JSON Pointer for where the data for the field is located in the source dataset (when using Form.Handler or DataContext). The path will also be set as the name attribute for the string-field. |
info | React.Node Array<React.Node> function | (optional) Info message shown below / after the field. When provided as a function, the function will be called with the current value as argument. The second parameter is an object with { conditionally, getValueByPath, getFieldByPath }. To show the message first after the user has interacted with the field, you can call and return conditionally function with a callback and with options: conditionally(() => 'Your message', { showInitially: true }) |
warning | React.Node Array<React.Node> function | (optional) Warning message shown below / after the field. When provided as a function, the function will be called with the current value as argument. The second parameter is an object with { conditionally, getValueByPath, getFieldByPath }. To show the message first after the user has interacted with the field, you can call and return conditionally function with a callback and with options: conditionally(() => 'Your message', { showInitially: true }) |
error | Error FormError Array<Error | FormError> function | (optional) Error message shown below / after the field. When provided as a function, the function will be called with the current value as argument. The second parameter is an object with { conditionally, getValueByPath, getFieldByPath }. To show the message first after the user has interacted with the field, you can call and return conditionally function with a callback and with options: conditionally(() => 'Your message', { showInitially: true }) |
disabled | boolean | (optional) Set true to show the field but without the possibility of changing the value. |
emptyValue | string undefined | (optional) The value to use (in onChange events etc) when emptying the field. Makes it possible for instance to provide undefined instead of an empty string when clearing the content of a text input. |
required | boolean | (optional) When set to true, the field will give an error if the value fails the required validation. When set to false, the field will not be required, but will add a "(optional)" suffix to the label. |
labelSuffix | React.Node | (optional) Will append an additional text to the label, like "(optional)". When using inheritLabel, the suffix will not be inherited. NB: The visual appearance of the labelSuffix may change in the future. |
schema | object | (optional) Custom JSON Schema for validating the value. |
validateInitially | boolean | (optional) Set to true to show validation based errors initially (from given value-prop or source data) before the user interacts with the field. |
validateUnchanged | boolean | (optional) Set to true to show validation based errors when the field is touched (like focusing a field and blurring) without having changed the value. Since the user did not introduce a new error, this will apply when the value was initially invalid based on validation. |
validateContinuously | boolean | (optional) Set to true to show validation based errors continuously while writing, not just when blurring the field. |
errorMessages | object | (optional) Custom error messages for each type of error, overriding default messages. The messages can be a React.ReactNode or a string. |
onChangeValidator | function | (optional) Custom validator function where you can return undefined, Error, FormError or an Array with either several other validators or several Error or FormError. It is triggered on every change done by the user. The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }. |
transformIn | function | (optional) Transforms the value before its displayed in the field (e.g. input). |
transformOut | function | (optional) Transforms the value before it gets forwarded to the form data object (context) or returned as the onChange value parameter. The first parameter is the internal value. Some fields do support a second parameter, like the SelectCountry, where the country object is given. |
label | string | (optional) Field label to show above / before the input feature. |
labelDescription | string | (optional) A more discreet text displayed beside the label (i.e for "(optional)"). |
labelDescriptionInline | boolean | (optional) If true, the labelDescription will be displayed on the same line as the label. |
labelSrOnly | boolean | (optional) Use true to make the label only readable by screen readers. |
labelSize | medium large | (optional) Define the font-size of the label based on the font-size table. |
help | object | (optional) Provide help content for the field using title and content as a string or React.Node. Additionally, you can set open to true to display the inline help, set the breakout property to false to disable the breakout of the inline help content, or use renderAs set to dialog to render the content in a Dialog (recommended for larger amounts of content). |
layout | string | (optional) Layout for the label and input. Can be horizontal or vertical. |
layoutOptions | object | (optional) Use this to set additional options for the horizontal layout. E.g. { width: "medium" }. You can also use a custom width {number}rem. Instead of a width, you can use a min/max width. E.g. { minWidth: "6rem", maxWidth: "12rem" }. |
width | string false | (optional) Will set the width for the whole block. Use small, medium, large for predefined standard widths. You can also set a custom width {number}rem or use stretch or false. |
contentWidth | string false | (optional) Will set the width for its contents. Use small, medium, large for predefined standard widths. You can also set a custom width {number}rem or use stretch or false. |
Space | string object | (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 | sv-SE | da-DK |
|---|---|---|---|---|
Date.label | Dato | Date | Datum | Dato |
Date.errorRequired | Du må fylle inn en dato. | You must enter a date. | Du måste fylla i en datum. | Du skal udfylde en dato. |
Date.errorRequiredRange | Du må fylle inn en datoperiode. | You must enter a date range. | Du måste fylla i en datumintervall. | Du skal udfylde et datointerval. |
Date.errorMinDate | Valgt dato kan ikke være før {date}. | Chosen date cannot be before {date}. | Valt datum kan inte vara före {date}. | Valgt dato må ikke være før {date}. |
Date.errorMaxDate | Valgt dato kan ikke være etter {date}. | Chosen date cannot be after {date}. | Valt datum kan inte vara efter {date}. | Valgt dato må ikke være efter {date}. |
Date.errorStartDateMinDate | Startdato kan ikke være før {date}. | Start date cannot be before {date}. | Startdatum kan inte vara före {date}. | Startdato må ikke være før {date}. |
Date.errorStartDateMaxDate | Startdato kan ikke være etter {date}. | Start date cannot be after {date}. | Startdatum kan inte vara efter {date}. | Startdato må ikke være efter {date}. |
Date.errorEndDateMinDate | Sluttdato kan ikke være før {date}. | End date cannot be before {date}. | Slutdatum kan inte vara före {date}. | Slutdato må ikke være før {date}. |
Date.errorEndDateMaxDate | Sluttdato kan ikke være etter {date}. | End date cannot be after {date}. | Slutdatum kan inte vara efter {date}. | Slutdato må ikke være efter {date}. |
Date.errorInvalidDate | Ugyldig dato. | Invalid date. | Ogiltigt datum. | Ugyldig dato. |
Date.errorInvalidStartDate | Ugyldig startdato. | Invalid start date. | Ogiltigt startdatum. | Ugyldig startdato. |
Date.errorInvalidEndDate | Ugyldig sluttdato. | Invalid end date. | Ogiltigt slutdatum. | Ugyldig slutdato. |
Field.errorSummaryTitle | Feil som må rettes | Please correct the following errors | Fel som måste åtgärdas | Felter der skal rettes |
Field.stateSummary | Oppsummering: | Summary: | Sammanfattning: | Oversigt: |
Field.errorSummary | Feil som må rettes: | Please correct the following errors: | Fel som måste åtgärdas: | Felter der skal rettes: |
Field.errorRequired | Dette feltet må fylles ut. | This field is required. | Detta fält måste fyllas i. | Dette felt skal udfyldes. |
Field.errorPattern | Verdien er ugyldig. | The value is invalid. | Värdet är ogiltigt. | Ugyldig værdi. |
Field.optionalLabelSuffix | (valgfritt) | (optional) | (valfritt) | (valgfrit) |