Range of dates selection

Docs

For selecting a range of dates.

Usage

To activate the range of dates selection mode, set the mode prop to range.

import { Calendar } from '@bryanberger/datepicker';
import { ChevronLeft, ChevronRight } from 'lucide-react';
 
const MyDatePicker = () => {
 
	return (
		<Calendar
			className="border rounded-md p-3"
			mode="range"
		>
			{ /* ... */ }
		</Calendar>
	);
};
 
export default MyDatePicker;

January 2024

Su	Mo	Tu	We	Th	Fr	Sa
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3

Default selected dates

You can set the default selected range of dates by setting an 2 elements length array of Date object to the defaultSelected prop.

The first element is for the start date and the second element is for the end date.

import { Calendar } from '@bryanberger/datepicker';
import { ChevronLeft, ChevronRight } from 'lucide-react';
 
const MyDatePicker = () => {
 
	const today = new Date();
	const inTwoDays = new Date();
	inTwoDays.setDate(today.getDate() + 2);
 
	return (
		<Calendar
			className="border rounded-md p-3"
			mode="range"
			defaultSelected={ [ today, inTwoDays ] }
		>
			{ /* ... */ }
		</Calendar>
	);
};

January 2024

Su	Mo	Tu	We	Th	Fr	Sa
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3

Limit dates selection

You can limit the dates selection by setting the min and max props.

const MyDatePicker = () => {
 
	const today = new Date();
	const inTwoDays = new Date();
	inTwoDays.setDate(today.getDate() + 2);
 
	return (
		<Calendar
			className="border rounded-md p-3"
			mode="range"
			defaultSelected={ [ today, inTwoDays ] }
			min={ 2 }
			max={ 6 }
		>
			{ /* ... */ }
		</Calendar>
	);
};

January 2024

Su	Mo	Tu	We	Th	Fr	Sa
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3

Control the selected date

You can make the Calendar component controlled by passing the selected prop. You will then have to update the selected prop yourself by using the onSelect callback function.

You can now control the entire selection process.

const isSameDay = (date1: Date, date2: Date) => {
	return date1.getDate() === date2.getDate()
		&& date1.getMonth() === date2.getMonth()
		&& date1.getFullYear() === date2.getFullYear();
};
 
const MyDatePicker = () => {
 
	const today = new Date();
	const tomorrow = new Date();
	tomorrow.setDate(today.getDate() + 1);
 
	const [ selected, setSelected ] = useState<Date[]>([ today, tomorrow ]);
 
	const handleSelect = (date: Date) => {
		setSelected((prevSelected) => {
			const dateIndex = prevSelected.findIndex((prevDate) => isSameDay(prevDate, date));
			const isDateAlreadySelected = dateIndex !== -1;
			if (isDateAlreadySelected) {
				return prevSelected.filter((_, i) => i !== dateIndex);
			}
			return [ ...prevSelected, date ];
		});
	};
 
	return (
		<div>
			<Calendar
				className="border rounded-md p-3"
				defaultSelected={ [ today, tomorrow ] }
				mode="multiple"
				selected={ selected }
				onSelect={ handleSelect }
			>
				{ /* ... */ }
			</Calendar>
			<p>Selected dates:</p>
			<ul className="list-disc pl-6">
				{
					selected.map((date) => (
						<li key={ date.toISOString() }>{ date.toLocaleDateString() }</li>
					))
				}
			</ul>
		</div>
	);
};
 
export default MyDatePicker;

January 2024

Su	Mo	Tu	We	Th	Fr	Sa
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3

Selected start date: 1/8/2024

Selected end date: 1/10/2024