Date Picker

A date picker built on Ark UI Date Picker. The bundled <DatePicker /> gives you a labeled field, input, calendar trigger, and a placeholder panel inside DatePickerContent—you are expected to replace that panel with the calendar views you need (for example month grid and navigation) using Ark’s exported parts.

import { DatePicker } from "@/components/ui/date-picker";

export default function Example() {
  return <DatePicker label="Date" placeholder="Pick a date" />;
}

Installation

liminal add date-picker

Usage

Optional label and placeholder customize the field. All other props are forwarded to DatePickerRoot (Ark DatePicker.Root), so you can set locale, selection mode, value / onValueChange, and more per the Ark documentation.

The default popover content is a short hint to compose the calendar; swap it for DatePickerView* / DatePickerTable / etc. as in the Ark Date Picker examples.

Examples

Compound API

These parts are re-exported from @/components/ui/date-picker: DatePickerRoot, DatePickerLabel, DatePickerControl, DatePickerInput, DatePickerTrigger, DatePickerPositioner, DatePickerContent. Compose them and add Ark calendar views inside DatePickerContent for a full picker UI.

import {
  DatePickerRoot,
  DatePickerLabel,
  DatePickerControl,
  DatePickerInput,
  DatePickerTrigger,
  DatePickerContent,
} from "@/components/ui/date-picker";

export default function Example() {
  return (
    <DatePickerRoot>
      <DatePickerLabel>Date</DatePickerLabel>
      <DatePickerControl>
        <DatePickerInput placeholder="Pick a date" />
        <DatePickerTrigger aria-label="Open calendar" />
      </DatePickerControl>
      <DatePickerContent>
        {/* Add Ark DatePicker.View, DatePicker.Table, etc. per Ark docs */}
      </DatePickerContent>
    </DatePickerRoot>
  );
}

API

Also accepts all props from Ark DatePicker.Root (for example selectionMode, locale, value, onValueChange). See Ark Date Picker.