Docs › Components › Date Picker

Shadcn Date Picker

The shadcn/ui date picker is a pattern, not a single component: it combines a Button trigger, a Popover, and a Calendar into a compact date control, styled with Tailwind CSS v4. Because you compose it, you control the trigger label, formatting, and selection mode. Date pickers handle scheduling and checkout dates across ShadcnStore blocks.

Key features

• Compact trigger that opens a calendar in a popover.
• Single date or date range selection.
• Full control over the trigger label and date formatting.
• Keyboard and screen-reader accessible through the underlying pieces.
• Built from Calendar, Popover, and Button.

Installation

Add the pieces it composes:

npx shadcn@latest add calendar popover button

Usage

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

export function DatePicker() {
  const [date, setDate] = useState<Date>()
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline" />}>
        {date ? format(date, "PPP") : "Pick a date"}
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0">
        <Calendar mode="single" selected={date} onSelect={setDate} />
      </PopoverContent>
    </Popover>
  )
}

Date range picker

Use the Calendar in range mode and format both ends in the trigger:

import type { DateRange } from "react-day-picker"

const [range, setRange] = useState<DateRange>()
// trigger label: range?.from && range?.to
//   ? `${format(range.from, "LLL d")} - ${format(range.to, "LLL d")}`
//   : "Pick a range"
<Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />

Composition

The date picker composes Popover and Calendar. Use render on PopoverTrigger to style the trigger as a Button:

<PopoverTrigger render={<Button variant="outline" />}>
  {date ? format(date, "PPP") : "Pick a date"}
</PopoverTrigger>

Accessibility

• Give the trigger a clear label: the selected date when set, or "Pick a date" when empty.
• Focus moves into the calendar on open and returns to the trigger on close.
• For a simple, single free-form date, consider a plain Input with type="date" for native accessibility.

When to use the Date Picker

Use a date picker when space is limited and a visible month grid would be too large: a form field, a filter, or a booking control. When the calendar can stay visible, use the Calendar inline instead. For time selection, pair it with a time input.

Used in these blocks

• Checkout forms: delivery and billing dates.
• Apps: scheduling fields.
• Widgets: date-range filters.

Related components

The date picker is built from Calendar, Popover, and Button, and usually lives inside a Form.

FAQ

What is the shadcn date picker?

The date picker is a pattern that combines a Button trigger, a Popover, and a Calendar to let users pick a date in a compact control.

Is the date picker a single component?

No. shadcn provides the Calendar and Popover pieces and a guide to compose them, so you can shape the trigger and formatting to your app.

How do I build a date range picker?

Use the Calendar in range mode inside the Popover, and format the selected from and to dates in the trigger button label.

How do I format the selected date?

Use a date library such as date-fns (for example format(date, "PPP")) to render the trigger label.