Date Field
5.0.0
The Date Field component lets users select a date with the keyboard.
| Namn | Typ | Beskrivning |
|---|---|---|
calendarButtonAriaLabel | string | Aria label for calendar button. |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
customCalendarButtonRef | Ref | Use this if you want to bypasss internal focus handling |
customTranslation | DeepPartial | Translation object used for screen reader texts. |
isCalendarOpen | boolean | Determines if the calendar is open. |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component. |
lang * | "sv" |
"en" | Language used for localization and date formatting. |
maxDate | string | Disable all dates after this. Expected in 'yyyy-MM-dd' format. |
minDate | string | Disable all dates before this. Expected in 'yyyy-MM-dd' format. |
onAccept | (value: string) => void | Callback that is fired when input value passes validation |
onChange | (event: ChangeEvent) => void | Callback when field changes. |
onFocus | FocusEventHandler | Callback when field is focused. |
onToggleCalendar | () => void | Function to run on open calendar button. |
required | boolean | If true, aria-required="true" will be added to the input element, informing assistive technologies that the field is mandatory.
⚠️ Note: This does not enable native HTML validation or add a visual asterisk.
If a visual indication is needed, you must manually add a * to the label yourself. |
showCalendarButton | boolean | Determines whether to display the Calendar IconButton within the DateField. |
timeZone | string | Set timezone for the DateField |
value * | string | DateField value. |
npm install @sj-ab/component-library.ui.date-fieldSe dokumentationen av tillgängligheten för komponenterna DatePicker och TextField: