Calendar

Un mois de dates, sélectionnables une à une ou par plage.

Trois panneaux — jours, mois, années — plutôt qu'un défilement infini : choisir une date de naissance demande de remonter trente ans, et trente ans de défilement ne sont pas une navigation.

Les dates circulent en chaînes AAAA-MM-JJ, jamais en objets Date : un Date porte une heure et un fuseau dont une date de facture n'a que faire, et qui la décalent d'un jour une fois sur deux.

Installation

sia-ui add calendar

Ou par le paquet, sans rien copier :

import { Calendar } from "@sia-ui/react-web";

Props

Prop	Type	Défaut	Description
cellRender	(day: CalendarDay, originNode: ReactNode) => ReactNode	—
className	string	—
defaultMode	"month" | "year"	month
defaultMonth	string	—
defaultRange	CalendarRangeValue	{ start: "", end: "" }
defaultValue	string	—
disabledDate	(date: string) => boolean	—
firstDayOfWeek	0 | 1	1
fullscreen	boolean	false
headerRender	(props: { month: string; mode: CalendarMode; onMonthChange: (month: string) => void; onModeChange: (mode: CalendarMode) => void; }) => ReactNode	—
locale	string	—	La langue des jours et des mois. Par défaut, celle de la locale SIA.
mode	"month" | "year"	—
month	string	—
onMonthChange	(month: string) => void	—
onPanelChange	(month: string, mode: CalendarMode) => void	—
onRangeChange	(value: CalendarRangeValue) => void	—
onSelect	(value: string, source: "date" | "month" | "year") => void	—
onValueChange	(value: string) => void	—
range	CalendarRangeValue	—
renderDay	(day: CalendarDay) => ReactNode	—
renderExtraFooter	() => ReactNode	—
selectionMode	"single" | "range"	single
showWeek	boolean	false
tone	ComponentTone	primary
validRange	[string, string]	—
value	string	—

Voir aussi

• Le composant dans le catalogue — états, variantes, et bac à sable.
• La référence complète — tous les composants.