Date Picker

unreleasedstable

A trigger and calendar popup for selecting dates.

Usage

tsxUsage

import {
  DatePicker,
  DatePickerContent,
  DatePickerTrigger,
} from "@/components/ui/date-picker";
 
export function Component() {
  return (
    <DatePicker>
      <DatePickerTrigger placeholder="Select date" />
      <DatePickerContent />
    </DatePicker>
  );
}

API Reference

DatePicker

Root owner for selected date, popup state, calendar month state, and popup positioning.

DatePickerTrigger

Button trigger that displays the selected date or placeholder.

DatePickerContent

Portaled calendar popup content with grid navigation and selectable day cells.

Calendar

Standalone calendar root exported from the same registry source.