Date Picker

A date picker component with calendar popup.

shadcn/ui docs

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

import { format } from 'date-fns'
import { Calendar as CalendarIcon } from 'lucide-react'
 
import * as React from 'react'
 
import { Button } from '@/components/ui/button'
import { Calendar } from '@/components/ui/calendar'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover'
const [date, setDate] = React.useState<Date>()
<Popover>
  <PopoverTrigger asChild>
    <Button
      variant="noShadow"
      className="w-[280px] justify-start text-left font-base"
    >
      <CalendarIcon />
      {date ? format(date, "PPP") : <span>Pick a date</span>}
    </Button>
  </PopoverTrigger>
  <PopoverContent className="w-auto border-0! p-0">
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      initialFocus
    />
  </PopoverContent>
</Popover>