Date Picker

"use client";

import { format } from "date-fns";
import { CalendarIcon } from "lucide-react";
import { useState } from "react";

The Date Picker is built by composing Popover and Calendar. There is no separate component to install — add the building blocks and compose them.

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.vercel.app/r/popover.json
npx shadcn@latest add https://shadcn-cssinjs.vercel.app/r/calendar.json
Copy

RTL

To enable right-to-left support, see the RTL guide.

"use client";

import { format } from "date-fns";
import { arSA, he } from "date-fns/locale";
import { ChevronDownIcon } from "lucide-react";
import * as React from "react";

API Reference

The DatePicker is composed from the Popover and Calendar components. See their API references for the available props.