Props

PropKiểuMặc địnhMô tả
value{ start: Date | null; end: Date | null }Giá trị khoảng ngày đã chọn
onChange(value: { start: Date | null; end: Date | null }) => voidHàm gọi lại khi giá trị thay đổi
presetsDateRangePreset[]Các thiết lập khoảng ngày được định sẵn
maxDaysnumberSố ngày tối đa cho phép trong khoảng (bao gồm)
minDaysnumberSố ngày tối thiểu yêu cầu trong khoảng (bao gồm)
allowSingleDateInRangebooleantrueCho phép khoảng ngày có ngày bắt đầu và kết thúc giống nhau
minDateDateNgày tối thiểu có thể chọn
maxDateDateNgày tối đa có thể chọn
localePartial<Locale>Cấu hình ngôn ngữ tùy chỉnh
initialMonthDateTháng hiển thị ban đầu
size"small" | "medium" | "large" | "x-large""medium"Kích thước thành phần
weekStartsOnWeekDay"sunday"Ngày đầu tiên của tuần
isDateUnavailable(date: Date) => booleanĐánh dấu các ngày là không khả dụng
displayFormatstringĐịnh dạng hiển thị tùy chỉnh (ví dụ: "YYYY/MM/DD")
openbooleanTrạng thái mở được kiểm soát
initialOpenbooleanTrạng thái mở ban đầu (không kiểm soát)
onOpenChange(open: boolean) => voidHàm gọi lại khi trạng thái mở thay đổi
requiredbooleanfalseVô hiệu hóa việc xóa giá trị
showOutsideDaysbooleanfalseHiển thị các ngày từ những tháng liền kề
highlightDatesDate[]Các ngày cần làm nổi bật
shouldCloseOnSelectbooleanfalseTự động xác nhận khi ngày kết thúc được chọn
numberOfMonthsnumber2Số tháng cần hiển thị
captionLayout"buttons" | "dropdown""buttons"Kiểu điều hướng tiêu đề
fromYearnumberNăm bắt đầu cho danh sách thả xuống
toYearnumberNăm kết thúc cho danh sách thả xuống
disablePastbooleanfalseVô hiệu hóa các ngày trước hôm nay
disableFuturebooleanfalseVô hiệu hóa các ngày sau hôm nay
inlinebooleanfalseHiển thị lịch nội tuyến (không có cửa sổ bật lên)
namestringTên của input ẩn để gửi biểu mẫu (ngày bắt đầu)
endNamestringTên của input ẩn cho ngày kết thúc (mặc định là name-end)
placeholderstringVăn bản giữ chỗ của trình kích hoạt
hideHeaderbooleanfalseẨn tiêu đề điều hướng
hideFooterbooleanfalseẨn chân trang hành động

DateRangePreset

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