Set up Camaleo once (Installation), then import what you need. The value is a { start, end } object of @internationalized/date dates, re-exported from the library. Put the picker in a Field to give it a label.
DateRangePicker takes the props of the React Aria date range picker. These are the ones you use most:
PropTypeDefaultDescription
classNamestring—Class name for the root element.
styleCSSProperties—Inline style for the root element.
openboolean—Opens or closes the calendar popup, controlled. Pair it with onOpenChange.
disabledboolean—Disables both inputs and the calendar button.
readOnlybooleanfalseShows the range and keeps it focusable, but it can't be changed.
invalidboolean—Marks the picker invalid. Inside a Field, the field's invalid is used when this is not set.
requiredbooleanfalseMarks both dates as required for assistive tech.
localestring—The locale for the segment order, month names and first day of the week, like "en-US". Defaults to the browser's.
weekdayStyle"narrow" | "short" | "long""short"How the weekday names in the calendar are written. Defaults to "short".
separatorReactNode"–"What goes between the start and the end date. Hidden from screen readers. Defaults to "–".
triggerLabelstring—Accessible name of the calendar button. React Aria provides a translated default.
previousLabelstring—Accessible name of the previous month button. React Aria provides a translated default.
nextLabelstring—Accessible name of the next month button. React Aria provides a translated default.
calendarFooterReactNode—Content shown under the calendar grid, like a legend or a note.
valueDateRange | null—The current value (controlled).
defaultValueDateRange | null—The default value (uncontrolled).
onChange(value: DateRange | null) => void—Handler that is called when the value changes.
onOpenChange(isOpen: boolean) => void—Handler that is called when the overlay's open state changes.
minValueDateValue—The minimum allowed date that a user may select.
maxValueDateValue—The maximum allowed date that a user may select.
placeholderValueDateValue—A placeholder date that influences the format of the placeholder shown when no value is
selected. Defaults to today's date at midnight.
granularity"day" | "hour" | "minute" | "second"—Determines the smallest unit that is displayed in the date picker. By default, this is "day"
for dates, and "minute" for times.
firstDayOfWeek"sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat"—The day that starts the week.
allowsNonContiguousRangesboolean—When combined with isDateUnavailable, determines whether non-contiguous ranges,
i.e. ranges containing unavailable dates, may be selected.
isDateUnavailable(date: DateValue) => boolean—Callback that is called for each date of the calendar. If it returns true, then the date is
unavailable.
startNamestring—The name of the start date input element, used when submitting an HTML form. See
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
endNamestring—The name of the end date input element, used when submitting an HTML form. See
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
Other React Aria props pass through, such as defaultOpen, shouldCloseOnSelect, hourCycle, hideTimeZone, pageBehavior and autoFocus. Unlike DatePicker, it doesn't take name from the Field: use startName and endName.
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the picker itself. The calendar in the popup reads the RangeCalendar tokens.