Właściwości

PropTypDomyślneOpis
value{ start: Date | null; end: Date | null }Wybrany zakres dat
onChange(value: { start: Date | null; end: Date | null }) => voidFunkcja zwrotna wywoływana przy zmianie wartości
presetsDateRangePreset[]Predefiniowane zestawy zakresów dat
maxDaysnumberMaksymalna dozwolona liczba dni w zakresie (włącznie)
minDaysnumberMinimalna wymagana liczba dni w zakresie (włącznie)
allowSingleDateInRangebooleantrueZezwalaj na zakres, w którym data początkowa jest równa końcowej
minDateDateMinimalna data do wyboru
maxDateDateMaksymalna data do wyboru
localePartial<Locale>Niestandardowa konfiguracja lokalizacji
initialMonthDatePoczątkowy wyświetlany miesiąc
size"small" | "medium" | "large" | "x-large""medium"Rozmiar komponentu
weekStartsOnWeekDay"sunday"Pierwszy dzień tygodnia
isDateUnavailable(date: Date) => booleanOznacz daty jako niedostępne
displayFormatstringNiestandardowy format wyświetlania (np. "DD.MM.YYYY")
openbooleanKontrolowany stan otwarcia
initialOpenbooleanPoczątkowy stan otwarcia (niekontrolowany)
onOpenChange(open: boolean) => voidFunkcja zwrotna wywoływana przy zmianie stanu otwarcia
requiredbooleanfalseWyłącz możliwość czyszczenia wartości
showOutsideDaysbooleanfalsePokaż dni z sąsiednich miesięcy
highlightDatesDate[]Daty do podświetlenia
shouldCloseOnSelectbooleanfalseAutomatycznie zatwierdź po wybraniu daty końcowej
numberOfMonthsnumber2Liczba wyświetlanych miesięcy
captionLayout"buttons" | "dropdown""buttons"Styl nawigacji w nagłówku
fromYearnumberRok początkowy dla listy rozwijanej
toYearnumberRok końcowy dla listy rozwijanej
disablePastbooleanfalseWyłącz daty przed dniem dzisiejszym
disableFuturebooleanfalseWyłącz daty po dniu dzisiejszym
inlinebooleanfalsePokaż kalendarz w treści (bez wyskakującego okienka)
namestringNazwa ukrytego pola dla przesyłania formularza (data początkowa)
endNamestringNazwa ukrytego pola dla daty końcowej (domyślnie name-end)
placeholderstringTekst zastępczy przycisku
hideHeaderbooleanfalseUkryj nagłówek nawigacyjny
hideFooterbooleanfalseUkryj stopkę z przyciskami

DateRangePreset

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