Range Date Picker

A date picker that allows the selection of a range of dates.

Usage

Example Code

1import { CalendarDateRange } from "inc-design-system/calendar";

Example Code

1const [selectedDate, setSelectedDate] = React.useState<
2  CalendarDateRange | undefined
3>(undefined);
4
5return (
6  <RangeDatePicker
7    today={new Date()}
8    selected={selectedDate}
9    onSelect={setSelectedDate}
10  />
11);

Props

RangeDatePicker

Prop	Type	Description	Default
today	Date	The current date.	new Date()
selected	CalendarDateRange \| undefined	The currently selected date range. If a date range is selected, it will be displayed in the date picker. If no date is selected, the placeholder text will be displayed instead.	-
onSelect	(date: CalendarDateRange \| undefined) => void	A callback function that is called when a date range is selected in the date picker. The selected date range is passed as an argument to this function.	-
disabled	boolean	A boolean that determines whether the date picker is disabled. If `true`, the date picker is disabled and cannot be interacted with. If `false` or omitted, the date picker is enabled.	false
buttonClassName	string	A string that is added to the class list of the button element in the date picker. This can be used to add custom styles to the button.	''
dropDownClassName	string	A string that is added to the class list of the dropdown element in the date picker. This can be used to add custom styles to the dropdown.	-
calendarClassName	string	A string that is added to the class list of the calendar element in the date picker. This can be used to add custom styles to the calendar.	-
startDatePlaceholder	string	The placeholder text that is displayed when the start date is not selected.	'Start date'
endDatePlaceholder	string	The placeholder text that is displayed when the end date is not selected.	'End date'
disabledDates	Matcher \| Matcher[] \| undefined	Specifies which days should be disabled in the calendar. It can disable specific dates, ranges, or days of the week. Supports complex conditions like disabling before, after, or specific days.	-
onOpenChange	function	A function that is called when the visibility of the date picker changes.	-
modal	boolean	A boolean that determines whether the date picker is displayed as a modal.	false