For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
43
Sponsor

Date Picker

PreviousNext

A date picker component built by composing the Popover and Calendar.

"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

$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.com/r/popover.json
npx shadcn@latest add https://shadcn-cssinjs.com/r/calendar.json

Examples

Basic

"use client";

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

import { Button } from "@/components/ui/button";

Range Picker

"use client";

import { addDays, format } from "date-fns";
import { CalendarIcon } from "lucide-react";
import { useState } from "react";
import type { DateRange } from "react-day-picker";

Date of Birth

"use client";

import { useState } from "react";

import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";

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";