Props

PropTypeDefaultDescription
value{ start: Date | null; end: Date | null }—Selected date range value
onChange(value: { start: Date | null; end: Date | null }) => void—Callback when value changes
presetsDateRangePreset[]—Predefined date range presets
maxDaysnumber—Maximum days allowed in range (inclusive)
minDaysnumber—Minimum days required in range (inclusive)
allowSingleDateInRangebooleantrueAllow range where start equals end
minDateDate—Minimum selectable date
maxDateDate—Maximum selectable date
localePartial<Locale>—Custom locale configuration
initialMonthDate—Initial displayed month
todayDatenew Date()Override today’s date for isToday highlighting and disablePast/disableFuture calculations
onMonthChange(month: Date) => void—Callback fired when the displayed month changes
size"small" | "medium" | "large" | "x-large""medium"Component size
weekStartsOnWeekDay"sunday"First day of the week
isDateUnavailable(date: Date) => boolean—Mark dates as disabled
displayFormatstring—Custom display format (e.g. "YYYY/MM/DD")
openboolean—Controlled open state
initialOpenboolean—Initial open state (uncontrolled)
onOpenChange(open: boolean) => void—Callback when open state changes
requiredbooleanfalseDisable clearing the value
showOutsideDaysbooleanfalseShow days from adjacent months
highlightDatesDate[]—Dates to highlight
shouldCloseOnSelectbooleanfalseAuto-confirm when end date is selected
numberOfMonthsnumber2Number of months to display
captionLayout"buttons" | "dropdown""buttons"Caption navigation style
fromYearnumber—Start year for dropdown
toYearnumber—End year for dropdown
disablePastbooleanfalseDisable dates before today
disableFuturebooleanfalseDisable dates after today
inlinebooleanfalseShow calendar inline (no popup)
namestring—Hidden input name for form submission (start date)
endNamestring—Hidden input name for end date (defaults to name-end)
placeholderstring—Trigger placeholder text
hideHeaderbooleanfalseHide the navigation header
hideFooterbooleanfalseHide the action footer

DateRangePreset

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