Date Field

5.1.3

The Date Field component lets users select a date with the keyboard.

Demo

Props

Se fullständing dokumentation(öppnas i ny flik)

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.
displayFormat	`string`	Custom format for displaying the date in the input field. If not specified, uses the default format (e.g., "Thursday, 1 January"). Uses date-fns format tokens directly (e.g., "yyyy-MM-dd" for ISO format, "dd/MM/yyyy", "MM-dd-yyyy"). See date-fns documentation for available format tokens.
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.
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.

Installation

npm install @sj-ab/component-library.ui.date-field

Länkar

Tillgänglighet

Se dokumentationen av tillgängligheten för komponenterna DatePicker och TextField:

Text Field

Date Picker

Date Field

Demo

Props

Installation

Länkar

Tillgänglighet

Change log

Statistik