Date Picker

A date picker component with calendar popup.

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} />
  </PopoverContent>
</Popover>