Date Picker

A date picker component built with Calendar and Popover.

Basic Date Picker

Date Range Picker

Select a range of dates for filtering or scheduling.

With Presets

Add quick selection presets for common date ranges.

Usage

import { format } from "date-fns"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Button } from "@/components/ui/button"
import { CalendarIcon } from "lucide-react"

const [date, setDate] = React.useState<Date>()

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline" className="w-[280px] justify-start">
      <CalendarIcon className="mr-2 h-4 w-4" />
      {date ? format(date, "PPP") : "Pick a date"}
    </Button>
  </PopoverTrigger>
  <PopoverContent className="w-auto p-0">
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      initialFocus
    />
  </PopoverContent>
</Popover>

Calendar

Avatar