Skip to main content

Calendar

info

Calendar 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 { Calendar } from "@sparrowengg/twigs-react";

Usage

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

function App() {

const [value, setValue] = React.useState(parseDate('2023-07-24'));

return (
<Calendar
onChange={setValue}
value={value}
minValue={parseDate('2023-07-20')}
/>
);
}

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 is selectedfunction