Beta
Komponenten er under utvikling. Dette kan medføre breaking-changes i patch/minor versjon av kodepakker. Teamet ditt må selv ta stilling til om dere ønsker å bruke denne i produksjon.
Har du innspill eller funnet en bug? Send oss en melding her eller på slack! Beta-versjon er ment for rask iterering, så alle innspill hjelper.
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
Eksempler
Vi anbefaler å bruke UNSAFE_useDatepicker-hook hvis man har et input-felt
Vi anbefaler å bruke UNSAFE_useRangeDatepicker-hook hvis man har input-felter
Bruk onValidate-callback for å håndtere validering.
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.
Bruk
Ved valg av datoer som er langt bak eller frem i tid, burde man bruke dropdownCaption-prop med fromDate/toDate. Da lar man bruker lettere finne den tidsperioden de ønsker å velge fra. Dette er spesielt relevant med valg av eks fødselsdatoer.
Tilgjengelighet
For best mulig tilgjengelighet anbefaler vi å ta i bruk DatePicker.Input sammen med useDatepicker eller useDateRange-hook.
Retningslinjer
Bruk i modal
Modalen til designsystemet bruker standard position: relative for å kunne posisjonere "X"-knappen. Dette gjør at all bruk av popover ikke klarer å hoppe ut av modal-boksen. Du kan fikse dette ved å sette strategy="fixed" på DatePicker.
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.
Props
DatePicker
- children? ReactNode
- className? string
- wrapperClassName? string
- locale?"nb" | "nn" | "en"
- fromDate? Date
- toDate? Date
- dropdownCaption?boolean
- disabled? Matcher[]
- disableWeekends?boolean
- showWeekNumber?boolean
- open? boolean
- onClose? (() => void)
- onOpenToggle? (() => void)
- strategy?"absolute" | "fixed"
- 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
- Element datepicker anchors to. Use <DatePicker.Input /> for built-in toggle, or make your own with the open/onClose props
- Classname for datepicker in popover
- Classname for wrapper
- Changes datepicker locale
- The earliest day to start navigation.
- The latests day to end navigation.
- Display dropdown for choosing the month and the year. Needs `fromDate` + `toDate` to work.
- Apply the disabled modifier to the matching days.
https://react-day-picker.js.org/api/types/Matcher
- Disable saturday and sunday.
- Shows week numbers in left-column. Use with caution, takes up valuable screenspace for small screens.
- Open state for user-controlled state. Component controlled by default
- onClose callback for user-controlled state
- onOpenToggle callback for user-controlled state. Only called if `<DatePicker.Input />` is used
- 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
DatePicker.Input
- label ReactNode
- hideLabel?boolean
- size?"medium" | "small"
- error? ReactNode
- errorId? string
- disabled? boolean
- description? ReactNode
- id? string
- className? string
- ref? Ref<HTMLInputElement>
- Input label
- Shows label and description for screenreaders-only
- Changes padding and font-sizes
- Error message for element
- Override internal errorId
- Disables element
@note Avoid using if possible for accessibility purposes
- Adds a description to extend labling of a field
- Override internal id
- DatePicker.Input extends HTMLInputElement
useDatepicker
- defaultSelected? Date
- defaultMonth? Date
- required? boolean
- onDateChange? ((val?: Date) => void)
- inputFormat?string
- onValidate? ((val: DateValidationT) => void)
- locale?"nb" | "nn" | "en"
- fromDate? Date
- toDate? Date
- disabled? Matcher[]
- disableWeekends?boolean
- The initially selected Date
- Default shown month
- Make selection of Date required
- Callback for changed state
- Input-format
- validation-callback
- Changes datepicker locale
- The earliest day to start navigation.
- The latests day to end navigation.
- Apply the disabled modifier to the matching days.
https://react-day-picker.js.org/api/types/Matcher
- Disable saturday and sunday.
useRangeDatepicker
- defaultSelected? DateRange
- onRangeChange? ((val?: DateRange) => void)
- onValidate? ((val: RangeValidationT) => void)
- locale?"nb" | "nn" | "en"
- fromDate? Date
- toDate? Date
- disabled? Matcher[]
- disableWeekends?boolean
- defaultMonth? Date
- required? boolean
- inputFormat?string
- The initially selected DateRange
- Callback for changed state
- validation-callback
- Changes datepicker locale
- The earliest day to start navigation.
- The latests day to end navigation.
- Apply the disabled modifier to the matching days.
https://react-day-picker.js.org/api/types/Matcher
- Disable saturday and sunday.
- Default shown month
- Make selection of Date required
- Input-format
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 |