Date Picker

Calendar popover tuned to the Omni glass aesthetic—mono triggers, translucent surfaces, and range selection that mirrors our dashboard tooling.

Examples

Audit snapshot

Single date selection for pulling compliance reports or log exports.

Audit anchored to Monday, October 27th, 2025.

Maintenance window

Range picker with dual-month layout, clear control, and glass toolbar.

Window runs Oct 21, 2025 – Oct 27, 2025.

Installation

pnpm dlx shadcn@latest add @omni/date-picker

The picker builds on the calendar component. Install @omni/calendarif you haven't already pulled it into your project.

Usage

import { DatePicker } from "@/components/ui/date-picker"
import type { DateRange } from "react-day-picker"

export function WindowPicker() {
  const [window, setWindow] = useState<DateRange | undefined>()

  return (
    <DatePicker
      mode="range"
      value={window}
      onValueChange={setWindow}
      numberOfMonths={2}
      showClearButton
    />
  )
}