Intro
DatePicker lar bruker velge en eller flere tilgjengelige dager, samt perioder. Basert på hvordan du ønsker bruker skal kunne velge dato, kan man bruke medhørende inputfelt eller statisk kalender.
Egnet til:
- Velge en eller flere dager
- Velge en periode
Uegnet til:
- Valg av datoer som strekker seg over lengre tid
- Valg av datoer langt tilbake eller frem i tid
Eksempler
Vi anbefaler å bruke useDatepicker-hook hvis man har et input-felt
Før du belger å bruke range, vurder om to enkelte datepickere for start/slutt-dato ville vært bedre. Range fungerer bedre for korte perioder innenfor en månede.
Bruk onValidate-callback for å håndtere validering.
Prop allowTwoDigitYear legger til støtte for 'yy'-format. Tilgjengelig year-range vil være fra 1943-2042 (2023).
Varianter
Mode
DatePicker kommer med 3 forskjellige metoder for å innhente datoer.
- Single: Lar bruker velge 1 dag.
- Multiple: Lar bruker velge 1 eller flere dager. Bruk min/max-props for å sette begrensninger her.
- Range: Lar bruker velge en periode til-fra.
Read-only
Readonly-attributtet spesifiserer at et inputfelt i et skjema er skrivebeskyttet. Et skrivebeskyttet felt kan ikke endres, men brukere kan tabbe til det, markere det og kopiere teksten fra det. Til forskjell fra disabled-felter vil innholdet i readonly-felter inkluderes når et skjema sendes inn.
Retningslinjer
Ved valg av datoer som dekker perioder over flere år, burde man bruke dropdownCaption-prop med fromDate/toDate. Det lar bruker lettere finne den tidsperioden de ønsker å velge fra uten å måtte klikke seg frem til dem.
Vurder om Datepicker er den rette løsningen for deg
Datepicker lar bruker lett lete seg frem til datoer innenfor en tidsramme, men støter på problemer når tidsrommet den skal dekke trekker seg over lengre perioder. Valg av år lengre frem/tilbake i tid må gjøres via en select, noe som skaper problemer når man endre opp med 50+ valg.
Datepicker er et komplekst mønster og ofte vil det letteste for bruker være å manuelt skrive inn en dato i et TextField. Gov.uk har gjort en del research på valg av dato og velger selv å bare tilby et input uten interaktiv datovelger.
Relevante lenker
Bruk av fromDate/toDate
Når bruker åpner Datepicker vil alltid default vist måned være den samme som today (new Date()/prop). Hvis denne måneden faller utenfor fromDate/toDate-range vil det første bruker se bare være ikke valgbare datoer. Basert på hvilken informasjon man ønsker må man selv sette defaultMonth-prop til der det gir mest mening for bruker.
Date
Komponenten returnerer datoer i Date-format. Du må selv ta deg av konvertering til ønsket format og da evt tidssoner ved bruk av eks ISO-format. I selve komponenten bruker vi data-fns for parsing.
Tilgjengelighet
For best mulig tilgjengelighet anbefaler vi å ta i bruk DatePicker.Input sammen med useDatepicker eller useDateRange-hook.
Props
DatePicker
- children? ReactNode
- Element datepicker anchors to. Use <DatePicker.Input /> for built-in toggle, or make your own with the open/onClose props
- className? string
- Classname for datepicker in popover
- wrapperClassName? string
- Classname for wrapper
- locale?"nb" | "nn" | "en"
- Changes datepicker locale
- fromDate? Date
- The earliest day to start navigation.
- toDate? Date
- The latests day to end navigation.
- dropdownCaption?boolean
- Display dropdown for choosing the month and the year. Needs `fromDate` + `toDate` to work.
- disabled? Matcher[]
- Apply the disabled modifier to the matching days. https://react-day-picker.js.org/api/types/Matcher
- disableWeekends?boolean
- Disable saturday and sunday.
- showWeekNumber?boolean
- Shows week numbers in left-column. Use with caution, takes up valuable screenspace for small screens.
- open? boolean
- Open state for user-controlled state. Component controlled by default
- onClose? (() => void)
- onClose callback for user-controlled state
- onOpenToggle? (() => void)
- onOpenToggle callback for user-controlled state. Only called if `<DatePicker.Input />` is used
- strategy?"absolute" | "fixed"
- Avoid using if possible! Changes what CSS position property to use. You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
- bubbleEscape?boolean
- Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
- mode? "single" | "multiple" | "range"
- onSelect? ((val?: Date) => void) | ((val?: Date[]) => void) | ((val?: DateRange | undefined) => void) | undefined
- selected? Date | Date[] | DateRange
- defaultSelected? Date | Date[] | DateRange
- min? number
- max? number
DatePicker.Input
- label ReactNode
- Input label
- hideLabel?boolean
- Shows label and description for screenreaders-only
- size?"medium" | "small"
- Changes padding and font-sizes
- error? ReactNode
- Error message for element
- errorId? string
- Override internal errorId
- disabled? boolean
- Disables element @note Avoid using if possible for accessibility purposes
- description? ReactNode
- Adds a description to extend labling of a field
- id? string
- Override internal id
- readOnly? boolean
- Read only-state
- className? string
- ref? Ref<HTMLInputElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- DatePicker.Input extends HTMLInputElement
useDatepicker
- defaultSelected? Date
- The initially selected Date
- defaultMonth? Date
- Default shown month
- required? boolean
- Make selection of Date required
- onDateChange? ((val?: Date) => void)
- Callback for changed state
- inputFormat?string
- Input-format
- onValidate? ((val: DateValidationT) => void)
- validation-callback
- allowTwoDigitYear?boolean
- Allows input of with 'yy' year format. @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th. In 2023 this equals to 1943 - 2042
- openOnFocus?boolean
- Opens datepicker on input-focus
- locale?"nb" | "nn" | "en"
- Changes datepicker locale
- fromDate? Date
- The earliest day to start navigation.
- toDate? Date
- The latests day to end navigation.
- disabled? Matcher[]
- Apply the disabled modifier to the matching days. https://react-day-picker.js.org/api/types/Matcher
- disableWeekends?boolean
- Disable saturday and sunday.
useRangeDatepicker
- defaultSelected? DateRange
- The initially selected DateRange
- onRangeChange? ((val?: DateRange) => void)
- Callback for changed state
- onValidate? ((val: RangeValidationT) => void)
- validation-callback
- locale?"nb" | "nn" | "en"
- Changes datepicker locale
- fromDate? Date
- The earliest day to start navigation.
- toDate? Date
- The latests day to end navigation.
- disabled? Matcher[]
- Apply the disabled modifier to the matching days. https://react-day-picker.js.org/api/types/Matcher
- disableWeekends?boolean
- Disable saturday and sunday.
- defaultMonth? Date
- Default shown month
- required? boolean
- Make selection of Date required
- inputFormat?string
- Input-format
- allowTwoDigitYear?boolean
- Allows input of with 'yy' year format. @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th. In 2023 this equals to 1943 - 2042
- openOnFocus?boolean
- Opens datepicker on input-focus
Tokens
| Token | Fallback |
|---|---|
| --ac-date-middle-text | --a-text-on-action |
| --ac-date-middle-bg | --a-surface-action-selected |
| --ac-date-week-text | --a-text-on-neutral |
| --ac-date-week-bg | --a-surface-neutral |
| --ac-date-selected-text | --a-text-on-action |
| --ac-date-selected-bg | --a-surface-action-selected |
| --ac-date-disabled-bg | --a-surface-neutral-subtle |
| --ac-date-disabled-text | --a-text-subtle |
| --ac-date-hover-bg | --a-surface-action-subtle-hover |
| --ac-date-today-border | --a-border-action-selected |
| --ac-date-caption-text | --a-text-default |
| --ac-date-input-error-border | --a-border-danger |
| --ac-date-input-button-text | --a-text-default |
| --ac-date-input-button-hover-text | --a-text-action-on-action-subtle |
| --ac-date-input-button-hover-bg | --a-surface-action-subtle-hover |
