DateRangePicker
Un début et une fin, choisis ensemble.
Deux champs séparés laissent poser une fin antérieure au début, et il faut alors décider lequel des deux avait tort. Ici les deux bornes sont une seule valeur, et le calendrier les tient dans l'ordre.
Installation
bash
sia-ui add date-range-pickerOu par le paquet, sans rien copier :
tsx
import { DateRangePicker } from "@sia-ui/react-web";Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
* cellRender | CalendarProps | — | |
* disabledDate | CalendarProps | — | |
* locale | CalendarProps | — | |
* showWeek | CalendarProps | — | |
allowClear | boolean | true | |
className | string | — | |
defaultValue | CalendarRangeValue | { start: "", end: "" } | |
disabled | boolean | — | |
endLabel | string | — | Par défaut, « Date de fin » de la locale SIA. |
firstDayOfWeek | CalendarProps | 1 | |
invalid | boolean | — | |
max | string | — | |
min | string | — | |
onValueChange | (value: CalendarRangeValue) => void | — | |
overlayProps | Partial<Omit<OverlayProps, "children" | "open" | "onOpenChange" | "anchorRef">> | — | Réglages du panneau flottant — décalage, marge au bord, classe. |
placement | OverlayPlacement | bottom-start | |
startLabel | string | — | Par défaut, « Date de début » de la locale SIA. |
tone | ComponentTone | primary | |
value | CalendarRangeValue | — |
* obligatoire.
Voir aussi
- Le composant dans le catalogue — états, variantes, et bac à sable.
- La référence complète — tous les composants.