Date Picker

A date selection field that composes Calendar and Popover with a formatted display trigger. Supports controlled and uncontrolled modes with clear selection support.

✓Controlled and uncontrolled modes
✓Formats selected date via toLocaleDateString()
✓Opens Calendar in a Popover on click
✓Clear selection support

import { Date Picker }from "@aetherstack/ui"

date picker.tsx

"use client"

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

export function DatePickerDemo() {
  return <DatePicker placeholder="Pick a date" />
}

Usage

Uncontrolled

Basic usage without external state management.

Disabled

Use disabled to prevent interaction.

Props

Prop	Type	Default	Description
value	Date \| undefined	—	Controlled selected date value.
onValueChange	(date: Date \| undefined) => void	—	Callback fired when the user selects or clears a date.
placeholder	string	"Pick a date"	Text shown in the trigger when no date is selected.
disabled	boolean	false	Disables the trigger button and prevents calendar from opening.
className	string	—	Additional Tailwind classes on the trigger button.

* Required props

Accessibility

→The trigger is a Button — it receives focus and is keyboard activatable via Enter or Space.
→The Calendar inside the Popover uses Radix UI Calendar keyboard navigation (arrow keys, Tab).
→The Popover closes on Escape key press, returning focus to the trigger.
→Pair with a Label component using htmlFor to associate the label with the trigger button id.