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

Open in playground

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

Property	Description	Type	Default
value	selected value range	@internationalized/date Date
minValue	minimum selectable date value. Dates beyond this value will be disabled	@internationalized/date Date
maxValue	maximum selectable date value. Dates beyond this value will be disabled	@internationalized/date Date
isDisabled	Disable the calendar component	boolean	false
onChange	Callback function when date range is selected	function
onDaySelect	Callback function when day is selected	(date: DateValue, range: 'start' ǀ 'end') => void
onMonthSelect	Callback function when month is selected	(date: DateValue, range: 'start' ǀ 'end') => void
onYearSelect	Callback function when year is selected	(date: DateValue, range: 'start' ǀ 'end') => void
showFooter	Show footer with action button	boolean	true
footerAction	Action to be performed on footer button click	(state: CalendarState) => void
footerActionText	Text to be displayed on footer button	string	"Select"
renderFooter	Custom footer component	(state: CalendarState) => ReactNode
containerCSS	Custom CSS for the container element	CSS