Date Picker

Controlled or uncontrolled date picker with independent selection/open state, clear action and customizable trigger/popover surfaces.

Import

import { DatePicker } from "poyraz-ui/molecules";

Default

Click to open the calendar popover and select a date.

const [date, setDate] = useState<Date | undefined>();

<DatePicker
  selected={date}
  onSelect={setDate}
  placeholder="Pick a date"
/>

Uncontrolled Glass

Use defaultSelected for uncontrolled state and opt into clearable glass UI.

<DatePicker defaultSelected={new Date()} clearable popoverSurface="glass" />
pnpm dlx shadcn@latest add @poyraz/date-picker

Runtime dependencies

lucide-react@^0.574.0

Registry dependencies

@poyraz/poyraz-utils, @poyraz/poyraz-theme, @poyraz/button, @poyraz/calendar, @poyraz/popover, @poyraz/poyraz-recipes

Installed files

@ui/molecules/date-picker.tsx