DatePicker

A date field whose trigger opens a Calendar popover, with a rolling formatted value and a Clear footer.

When to use

• Choosing one date inside a form: viewing dates, move-in dates, due dates.
• When the page has no room for an always-visible calendar.
• For an inline calendar use Calendar; for a start and end date use DateRangePicker.

Usage

import { DatePicker } from "@/components/iris/date-picker/date-picker";
function MoveIn() {
  const [date, setDate] = React.useState();
  return h(DatePicker, {
    label: "Move-in date",
    value: date,
    onChange: setDate,
    placeholder: "Pick a move-in date",
    description: "The minimum stay is 30 days.",
    minDate: new Date(),
    showToday: true,
  });
}

Props

Prop	Type	Default	Description
label	string	required	Visible label; also names the calendar dialog.
value	Date	–	Selected date (controlled).
onChange	(date: Date | undefined) => void	–	Called on pick, and with undefined from Clear.
placeholder	string	"Select a date"	Shown when empty.
description	string	–	Helper copy under the field.
minDate / maxDate / disabledDates	Date / Date / (date: Date) => boolean	–	Passed to the calendar.
locale / format	string / Intl.DateTimeFormatOptions	"en-US" / { month: "short", day: "numeric", year: "numeric" }	Value formatting.
showToday	boolean	–	Adds a Today button to the calendar header.
...props	ButtonHTMLAttributes<HTMLButtonElement>	–	Forwarded to the trigger (id, disabled, className goes on the root).

Notes

• The trigger has aria-haspopup="dialog"; ArrowDown, Enter or Space open it and focus moves to the selected or current day. Escape closes and returns focus to the trigger; tabbing out or a pointer down outside also closes it.
• After a pick the popover waits about 300ms so the disc can land, then closes (instantly with reduced motion).
• The popover is absolutely positioned (not portalled), 320px wide; leave room below the field.
• Reads --surface, --hover, --line, --line-strong, --ink-3, --shadow-floating, --radius-control, --radius-panel, --radius-button.