Multiple dates selection

Docs

For selecting multiple dates.

Usage

To activate the multiple dates selection mode, set the mode prop to multiple.

import { Calendar } from '@bryanberger/datepicker';
import { ChevronLeft, ChevronRight } from 'lucide-react';
 
const MyDatePicker = () => {
 
	return (
		<Calendar
			className="border rounded-md p-3"
			mode="multiple"
		>
			{ /* ... */ }
		</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 date by setting an array of Date object to the defaultSelected prop.

import { Calendar } from '@bryanberger/datepicker';
import { ChevronLeft, ChevronRight } from 'lucide-react';
 
const MyDatePicker = () => {
 
	const today = new Date();
	const tomorrow = new Date();
	tomorrow.setDate(today.getDate() + 1);
 
	return (
		<Calendar
			className="border rounded-md p-3"
			mode="multiple"
			defaultSelected={ [ today, tomorrow ] }
		>
			{ /* ... */ }
		</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 tomorrow = new Date();
	tomorrow.setDate(today.getDate() + 1);
 
	return (
		<Calendar
			className="border rounded-md p-3"
			mode="multiple"
			defaultSelected={ [ today, tomorrow ] }
			min={ 2 }
			max={ 4 }
		>
			{ /* ... */ }
		</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 dates:

1/8/2024
1/9/2024