Single date selection

Docs

For selecting one date at a time.

The default selection mode of the Calendar component is single. This means that only one date can be selected at a time.

Usage

import { Calendar } from '@bryanberger/datepicker';
import { ChevronLeft, ChevronRight } from 'lucide-react';
 
const MyDatePicker = () => {
 
	return (
		<Calendar
			className="border rounded-md p-3"
			mode="single" // (optional when set to "single")
		>
			{ /* ... */ }
		</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 date

You can set the default selected date by setting a Date object to the defaultSelected prop.

import { Calendar } from '@bryanberger/datepicker';
import { ChevronLeft, ChevronRight } from 'lucide-react';
 
const MyDatePicker = () => {
 
	const today = new Date();
 
	return (
		<Calendar
			className="border rounded-md p-3"
			mode="single"
			defaultSelected={ today }
		>
			{ /* ... */ }
		</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.

import { Calendar } from '@bryanberger/datepicker';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { useState } from 'react';
 
const MyDatePicker = () => {
 
	const today = new Date();
	const [selected, setSelected] = useState<Date>(today);
 
	return (
		<div>
			<Calendar
				className="border rounded-md p-3"
				mode="single"
				selected={ selected }
				onSelect={ setSelected }
			>
				{ /* ... */ }
			</Calendar>
			<p>Selected date: { selected.toLocaleDateString() }</p>
		</div>
	);
};

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 date: 1/8/2024