Props

PropTypeDéfautDescription
value{ start: Date | null; end: Date | null }—Valeur de la plage de dates sélectionnée
onChange(value: { start: Date | null; end: Date | null }) => void—Rappel lorsque la valeur change
presetsDateRangePreset[]—Préréglages de plage de dates prédéfinis
maxDaysnumber—Nombre maximum de jours autorisés dans la plage (inclus)
minDaysnumber—Nombre minimum de jours requis dans la plage (inclus)
allowSingleDateInRangebooleantrueAutoriser une plage où le début est égal à la fin
minDateDate—Date minimale sélectionnable
maxDateDate—Date maximale sélectionnable
localePartial<Locale>—Configuration de la locale personnalisée
initialMonthDate—Mois initial affiché
size"small" | "medium" | "large" | "x-large""medium"Taille du composant
weekStartsOnWeekDay"sunday"Premier jour de la semaine
isDateUnavailable(date: Date) => boolean—Marquer les dates comme désactivées
displayFormatstring—Format d’affichage personnalisé (par ex. "YYYY/MM/DD")
openboolean—État d’ouverture contrôlé
initialOpenboolean—État d’ouverture initial (non contrôlé)
onOpenChange(open: boolean) => void—Rappel lorsque l’état d’ouverture change
requiredbooleanfalseDésactiver l’effacement de la valeur
showOutsideDaysbooleanfalseAfficher les jours des mois adjacents
highlightDatesDate[]—Dates à surligner
shouldCloseOnSelectbooleanfalseConfirmer automatiquement lorsque la date de fin est sélectionnée
numberOfMonthsnumber2Nombre de mois à afficher
captionLayout"buttons" | "dropdown""buttons"Style de navigation de la légende
fromYearnumber—Année de début pour le menu déroulant
toYearnumber—Année de fin pour le menu déroulant
disablePastbooleanfalseDésactiver les dates antérieures à aujourd’hui
disableFuturebooleanfalseDésactiver les dates postérieures à aujourd’hui
inlinebooleanfalseAfficher le calendrier en ligne (pas de popup)
namestring—Nom du champ de saisie masqué pour la soumission du formulaire (date de début)
endNamestring—Nom du champ de saisie masqué pour la date de fin (par défaut name-end)
placeholderstring—Texte de l’espace réservé du déclencheur
hideHeaderbooleanfalseMasquer l’en-tête de navigation
hideFooterbooleanfalseMasquer le pied de page des actions

DateRangePreset

interface DateRangePreset {
  label: string;
  value: { start: Date; end: Date } | (() => { start: Date; end: Date });
}