CalendarRange
A date range picker component that displays one or more date grids and allows users to select a contiguous range of dates.
Prerequisite
CalendarRange component requires additional dependency of @internationalized/date to be installed.
We will be working on removing this additional dependency in the future.
npm install --save @internationalized/dateImport
import { CalendarRange } from "@sparrowengg/twigs-react";
import { parseDate } from "@internationalized/date";Usage
function App() {
const [value, setValue] = React.useState({
start: parseDate("2025-08-04"),
end: parseDate("2025-08-15"),
});
return (
<CalendarRange
onChange={(value) => setValue(value as { start: CalendarDate; end: CalendarDate })}
value={value}
minValue={parseDate("2025-08-03")}
/>
);
}Examples
Compact calendar range and footer variants
Props
CalendarRange
| Prop | Type | Default |
|---|---|---|
value? | { start: DateValue, end: DateValue } | - |
defaultValue? | { start: DateValue, end: DateValue } | - |
onChange? | (value: { start: DateValue, end: DateValue }) => void | - |
minValue? | DateValue | - |
maxValue? | DateValue | - |
isDisabled? | boolean | false |
isDateUnavailable? | (date: DateValue) => boolean | - |
size? | 'sm' | 'md' | 'lg' | lg |
compact? | boolean | false |
showFooter? | boolean | true |
footerActionText? | string | 'Apply' |
footerAction? | (state: RangeCalendarState) => void | - |
renderFooter? | (state: RangeCalendarState) => ReactNode | - |
onDaySelect? | (date: DateValue, range: 'start' | 'end') => void | - |
onMonthSelect? | (date: DateValue, range: 'start' | 'end') => void | - |
onYearSelect? | (date: DateValue, range: 'start' | 'end') => void | - |
showTimePicker? | boolean | false |
showTimezonePicker? | boolean | false |
containerCSS? | CSS Object | - |