Date Picker
8.0.9
The Date Picker is a text field enhanced by a panel that lets the user select a date in a calendar month format.
| Namn | Typ | Beskrivning |
|---|---|---|
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
customTranslation | DeepPartial | Custom translations for screen reader texts. |
disabled | boolean | Disables the DatePicker component. |
disableFuture | boolean | Disables future dates locally. Set to false and use maxDate to align with a specific timezone. |
disableMask | boolean | Enables or disables the input mask. |
disablePast | boolean | Disables past dates locally. Set to false and use minDate to align with a specific timezone. |
disablePortal | boolean | Keeps the calendar within the DOM hierarchy of the parent component if true. |
errorHelperText | string | Custom error text that triggers an error state, overriding the default validation message. |
fullWidth | boolean | Expands the input field to fill the width with its parent container. |
hasActionButtons | boolean | Displays Cancel and Ok buttons; onAccept triggers only on Ok. |
hasWeekNumbers | boolean | Shows week numbers adjacent to dates when set to true. |
helperText | string | Additional descriptive text shown below the input field. |
id * | string | ID for the input field, enhancing accessibility by linking label and helperText. |
isLoading | boolean | Displays a loading skeleton instead of the DatePicker when true. |
journeyDirection | "outward" |
"return" | Describes the journey direction, aiding screen reader interpretation. |
label * | string | Text label for the DatePicker, visible to users. |
lang * | "sv" |
"en" | Language used for localization and date formatting. |
maxDate | string | Disables all dates after this date, expected in 'yyyy-MM-dd' format. |
minDate | string | Disables all dates before this date, expected in 'yyyy-MM-dd' format. |
onAccept | (date: string) => void | Function called when the input value passes validation. |
onChange | (event: ChangeEvent) => void | Function called when the input field value changes. |
onError | (reason: "minDateError" |
"invalidDateError" |
"maxDateError", value: string) => void | Function called when a new validation error occurs. |
secondaryView | "month" |
"year" | Allows selection of month or year directly if set. |
timeZone | string | Timezone setting for the DatePicker, defaults to "Europe/Stockholm". |
value * | string | The current date value of the DatePicker, in 'yyyy-MM-dd' format. |
zIndexCalendar | number | Z-index for calendar popper/drawer. |
npm install @sj-ab/component-library.ui.date-pickerAdaptive design
Date Picker är en av våra viktigaste komponenter. Den måste fungera i många olika situationer: på dator, på mobilen, med mus, med tangentbord, med touch, med skärmläsare (mobil och dator) och med textförstoring.
Semantik
Date Picker kombinerar komponenterna Date Calendar och Date Field, som i sin tur bygger på motsvarande tredjepartskomponenter från MUI X.
Date Picker följer till största del designmönstret Date Picker Dialog från WAI-ARIA Authoring Practices Guide.
Responsivitet
På stora skärmar kan användaren antingen skriva in ett datum manuellt i ett Date Field, eller öppna kalendern i en Popover.
På små skärmar öppnar kalendern en Bottom Sheet med en Date Calendar. Textfält saknas i nuläget på liten skärm.
Tangentbordsstyrning
Kalendern kan styras med tangentbord både i mobil och desktopversion. På desktop kan användaren också skriva in ett ISO-formaterat datum i textfältet, t.ex. "2024-06-20".
När kalendern har fokus så kan användaren gå med piltangenterna. Vänster och höger för att gå mellan dagar, upp och ner för att gå mellan veckor.
WAI-ARIA
Kalendern är byggd som ett WAI-ARIA grid, med row, rowgroup, column, rowgroup och griditem.
Den valda dagen indikeras automatiskt med attributet aria-selected="true"
Inaktiva dagar indikeras med aria-disabled="true".
- Enter / PiltangenterVälj ett datum i kalender
Fix date field height om mobile
8.0.5Refactor TextField and TextField-based component styling
8.0.0Breaking
Contrived change to trigger export
7.2.7Fixes an issue in DatePicker.tsx where the calendar would open when tabbing...
7.2.6Updates design tokens with new border radii and updates border radii on all components.
7.2.0
Importer av Date Picker
Repos med Date Picker
Senaste installerade version av Date Picker
Äldsta installerade version av Date Picker