Props

PropTypeMặ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 }) => void—Hà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
maxDaysnumber—Số ngày tối đa cho phép trong khoảng (bao gồm)
minDaysnumber—Số 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 bằng ngày kết thúc
minDateDate—Ngày tối thiểu có thể chọn
maxDateDate—Ngày tối đa có thể chọn
localePartial<Locale>—Cấu hình ngôn ngữ tùy chỉnh
initialMonthDate—Thá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à bị vô hiệu hóa
displayFormatstring—Định dạng hiển thị tùy chỉnh (ví dụ: "YYYY/MM/DD")
openboolean—Trạng thái mở được kiểm soát
initialOpenboolean—Trạng thái mở ban đầu (không kiểm soát)
onOpenChange(open: boolean) => void—Hà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ừ các 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 đề
fromYearnumber—Năm bắt đầu cho danh sách thả xuống
toYearnumber—Nă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)
namestring—Tên của input ẩn để gửi biểu mẫu (ngày bắt đầu)
endNamestring—Tên của input ẩn cho ngày kết thúc (mặc định là name-end)
placeholderstring—Vă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 });
}