• Start
  • Blogg
  • Kom igång
  • Riktlinjer
  • Komponenter
  • Changelog
  • Tillgänglighet
  • Statistik
  • Inställningar

Komponenter

Komponenter

​
​

Inga resultat hittade, prova med andra sökvillkor.

Date Field

Date Field

3.1.9

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

Demo
Props
Installation
Länkar
Tillgänglighet
Change log
Statistik

Demo

Props

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

calendarButtonAriaLabel

stringAria label for calendar button.

customAttribute

{ attribute: string; value: string | number }Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

customCalendarButtonRef

RefUse this if you want to bypasss internal focus handling

customTranslation

DeepPartialTranslation object used for screen reader texts.

isCalendarOpen

booleanDetermines if the calendar is open.

isLoading

booleanIf true, a loading skeleton will be rendered instead of the component.

lang *

"sv" | "en"Language used for localization and date formatting.

maxDate

stringDisable all dates after this. Expected in 'yyyy-MM-dd' format.

minDate

stringDisable all dates before this. Expected in 'yyyy-MM-dd' format.

onAccept

(value: string) => voidCallback that is fired when input value passes validation

onChange

(event: ChangeEvent) => voidCallback when field changes.

onFocus

FocusEventHandlerCallback when field is focused.

onToggleCalendar

() => voidFunction to run on open calendar button.

showCalendarButton

booleanDetermines whether to display the Calendar IconButton within the DateField.

timeZone

stringSet timezone for the DateField

value *

stringDateField value.

Installation

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

Länkar

  • Storybook

  • Figma

  • Bit.cloud

Tillgänglighet

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

Text Field

Date Picker

Change log

  • Upgrade to React 19

    3.1.0

Statistik