Skip to main content

CalendarRange

info

CalendarRange component requires additional dependancy of @internationalized/date to be installed.

We will be working on removing this additional dependancy in the future.

npm install --save @internationalized/date

Import

import { CalendarRange } from "@sparrowengg/twigs-react";

Usage

import { parseDate } from "@internationalized/date";

function App() {
const [value, setValue] = React.useState({
start: parseDate("2023-07-12"),
end: parseDate("2023-07-20"),
});

return (
<CalendarRange
onChange={setValue}
value={value}
minValue={parseDate("2023-07-10")}
/>
);
}

Props

PropertyDescriptionTypeDefault
valueselected value range@internationalized/date Date
minValueminimum selectable date value. Dates beyond this value will be disabled@internationalized/date Date
maxValuemaximum selectable date value. Dates beyond this value will be disabled@internationalized/date Date
isDisabledDisable the calendar componentbooleanfalse
onChangeCallback function when date range is selectedfunction