Docs
Date Picker
Date Picker
Date Picker component is a versatile and user-friendly input control that allows users to select dates with options for date range and presets. It simplifies the process of date selection, providing a calendar interface with additional features to enhance the user experience. Whether picking a single date, a range, or utilizing predefined presets, the Date Picker component is designed to accommodate various date-related scenarios in web applications.
Installation
The Date Picker is built using a composition of the <Popover /> and the <Calendar /> components.
See installation instructions for the Popover and the Calendar components.
Usage
"use client";
import * as React from "react";
import { format } from "date-fns";
import { Calendar as CalendarIcon } from "lucide-react";
import { cn } from "@camped-ui/lib";
import { Button } from "@camped-ui/button";
import { Calendar } from "@camped-ui/calendar";
import { Popover, PopoverContent, PopoverTrigger } from "@camped-ui/popover";
export function DatePickerDemo() {
const [date, setDate] = React.useState<Date>();
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>
);
}See the React DayPicker documentation for more information.