Date picker

A field-like button that opens a calendar in a popover and shows the picked day in words.

ui.date-pickercomponents/ui/calendar.tsx

Use case

For the AI

Use it for a date inside a form or a filter where a whole month should not take room until needed: an invoice's due date, a job's start day, an order's delivery date. The button reads "Pick a date" until a day is chosen, then the day in words, and the popover closes as the day is picked.

Use it when

A date field in a form (a due date, a start date)
A date filter above a table
Any date picked where the page has no room for a whole month

Use something else when

The month itself belongs on the page (a schedule's side panel): Calendar
Choosing among a few named periods (Today, This Week, This Month): Segmented control

Examples

Closes as a day is picked

Code

Import

import { useState } from "react"
import { CalendarIcon } from "@/components/icons"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverPopup, PopoverTrigger } from "@/components/ui/popover"

Usage

const dayWords = new Intl.DateTimeFormat("en-CA", { weekday: "short", month: "short", day: "numeric", year: "numeric" })

export function DueDate() {
  const [date, setDate] = useState<Date | undefined>()
  const [open, setOpen] = useState(false)
  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger render={<Button variant="outline" className="w-64 justify-start font-normal" />}>
        <CalendarIcon className="text-ink-4" />
        {date ? dayWords.format(date) : <span className="text-ink-4">Pick a date</span>}
      </PopoverTrigger>
      <PopoverPopup align="start" className="w-auto p-0">
        <Calendar
          mode="single"
          selected={date}
          onSelect={(d) => {
            setDate(d)
            setOpen(false)
          }}
        />
      </PopoverPopup>
    </Popover>
  )
}

Rules

Control the popover (`open`, `onOpenChange`) and close it in `onSelect`, so it closes as the day is picked.
The trigger is `Button variant="outline"` with a `CalendarIcon` first; with no date it says "Pick a date" in `text-ink-4`.
Print the day in words with `Intl.DateTimeFormat` ("Sat, Oct 3, 2026" in `en-CA`), never a raw ISO string.
`PopoverPopup` takes `align="start"` and `className="w-auto p-0"`; it rounds itself to the calendar's corner.