Date Picker
10.2.5
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. |
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. |
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. |
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 of 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. |
required | boolean | If true, aria-required="true" will be added to the input element, informing assistive technologies that the field is mandatory. |
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
Allow custom date format in DateField via new dateFormat prop
10.2.0Updated date-fns and @mui/x-date-pickers
10.1.0Remove maxDate and minDate props from DateField
10.0.5Enhance DateField and TimePicker accessibility with aria-haspopup
10.0.4Clean up component-library folder and update documentation in Storybook
10.0.1
Importer av Date Picker
Repos med Date Picker
Senaste installerade version av Date Picker
Äldsta installerade version av Date Picker