Date Picker
A component that allows users to select a single date or a date range from an interactive calendar interface, often presented within a popover, with optional preset selections.
Component Installation and Dependencies
The Date Picker component is constructed by combining two other fundamental components:
<Popover />: Used to display the calendar interface when the trigger element is activated.<Calendar />: Provides the actual interactive calendar grid for date selection.
Therefore, before implementing the Date Picker, ensure that both the Popover and the Calendar components are properly installed in your project. Please refer to their respective documentation pages for detailed installation steps.
Implementing the Date Picker
"use client"; // Directive for Next.js App Router
Popover, // Container for the dropdown content
PopoverContent, // The actual dropdown panel holding the calendar
PopoverTrigger, // The element that opens the popover (our button)
} from "@/components/ui/popover";
export function DatePickerDemo() {
// State to store the selected date
const [date, setDate] = React.useState<Date | undefined>(); // Use undefined for no initial selection
return (
<Popover>
<PopoverTrigger asChild>
<Button
variant={"outline"}
className={cn(
"w-[280px] justify-start text-left font-normal",
!date && "text-muted-foreground",
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{date ? format(date, "PPP") : <span>Pick a date</span>}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<Calendar
mode="single"
selected={date}
onSelect={setDate}
initialFocus
/>
</PopoverContent>
</Popover>
);
}This example demonstrates wrapping the <Calendar> component within a <Popover>. A <Button> acts as the <PopoverTrigger>, displaying the selected date (formatted using date-fns) or a placeholder. The selected and onSelect props of the <Calendar> are connected to a React.useState hook to manage the selected date.
Our <Calendar> component is built upon the powerful React DayPicker library. For advanced customization, internationalization, and understanding all available props and modes (like range selection, multiple dates, etc.), refer to the official React DayPicker documentation.