Właściwości

PropTypDomyślneOpis
value{ start: Date | null; end: Date | null }—Wybrany zakres dat
onChange(value: { start: Date | null; end: Date | null }) => void—Funkcja zwrotna wywoływana przy zmianie wartości
presetsDateRangePreset[]—Predefiniowane zestawy zakresów dat
maxDaysnumber—Maksymalna dozwolona liczba dni w zakresie (włącznie)
minDaysnumber—Minimalna wymagana liczba dni w zakresie (włącznie)
allowSingleDateInRangebooleantrueZezwalaj na zakres, w którym data początkowa jest równa końcowej
minDateDate—Minimalna data do wyboru
maxDateDate—Maksymalna data do wyboru
localePartial<Locale>—Niestandardowa konfiguracja lokalizacji
initialMonthDate—Początkowy wyświetlany miesiąc
size"small" | "medium" | "large" | "x-large""medium"Rozmiar komponentu
weekStartsOnWeekDay"sunday"Pierwszy dzień tygodnia
isDateUnavailable(date: Date) => boolean—Oznacz daty jako niedostępne
displayFormatstring—Niestandardowy format wyświetlania (np. "DD.MM.YYYY")
openboolean—Kontrolowany stan otwarcia
initialOpenboolean—Początkowy stan otwarcia (niekontrolowany)
onOpenChange(open: boolean) => void—Funkcja 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
fromYearnumber—Rok początkowy dla listy rozwijanej
toYearnumber—Rok 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)
namestring—Nazwa ukrytego pola dla przesyłania formularza (data początkowa)
endNamestring—Nazwa ukrytego pola dla daty końcowej (domyślnie name-end)
placeholderstring—Tekst 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 });
}