Date Picker

Combines a date field with calendar selection for dates and ranges.

Single: none

Multiple: none

Range: none

Input: none

Installation

Install Date Picker from Oros with shadcn CLI 4.13.0.

pnpm dlx shadcn@4.13.0 add @oros/date-picker

Usage

import {
  DatePicker,
  DatePickerCalendarProps,
  DatePickerPreset,
  DatePickerProps,
} from "@/components/ui/date-picker"

Open the Source tab in the preview for a complete working example.

Anatomy

Export	Responsibility
DatePicker	The root component that owns the primary structure and state.
formatDatePickerLabel	Provides a visible label for its related control or value.
DatePickerCalendarProps	A composable part of the component anatomy.
DatePickerPreset	A composable part of the component anatomy.
DatePickerProps	A composable part of the component anatomy.

API Reference

Date Picker exports 5 named entries. Component exports accept the props of their underlying HTML element or Base UI component, plus an optional className, unless the source defines a more focused type.

DatePicker Component
formatDatePickerLabel Utility
DatePickerCalendarProps Component
DatePickerPreset Component
DatePickerProps Component

Accessibility

Provide Date Picker with a visible label or an equivalent programmatic accessible name.
Expose disabled, required, selected, and invalid states through the component API instead of color alone, and keep keyboard focus visible.

Source

Date Picker is maintained by Oros and follows the same conventions as the rest of the library. Installing it adds the component source and required dependencies to your app. The Source tab above shows a complete usage example.

Context Menu Dialog