Component

Date Picker

A controlled calendar input with visual variants, popover animation, and disabled state support.

Examples

Live previews paired with copyable source.

Basic Date Picker

A controlled input and calendar popover.

tsx

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

<DatePicker selectedDate={date} onChange={setDate} />

Variants

Choose a surface treatment that fits your interface.

default

minimal

material

ios

tsx

<DatePicker selectedDate={date} onChange={setDate} variant="default" />
<DatePicker selectedDate={date} onChange={setDate} variant="minimal" />
<DatePicker selectedDate={date} onChange={setDate} variant="material" />
<DatePicker selectedDate={date} onChange={setDate} variant="ios" />

Animation

Change how the calendar enters and exits.

fade

scale

tsx

<DatePicker selectedDate={date} onChange={setDate} animation="fade" />
<DatePicker selectedDate={date} onChange={setDate} animation="scale" />

API Reference

Props available on the component.

Prop	Type	Default	Description
selectedDate	Date \| null	required	The currently selected date.
onChange	(date: Date) => void	required	Called when the user selects a date.
variant	'default' \| 'minimal' \| 'accent' \| 'neumorphic' \| 'dark' \| 'playful' \| 'material' \| 'ios'	'default'	Controls the input and calendar surface style.
animation	'fade' \| 'slide' \| 'scale' \| 'rotate' \| 'none'	'fade'	Controls the popover entry and exit animation.
disabled	boolean	false	Prevents opening the picker.
className	string	''	Additional classes applied to the wrapper.

Install

bash

pnpm dlx pacmanui add datepicker
npx pacmanui add datepicker

Basic Usage

tsx

import { DatePicker } from '@/components/pacmanui/date-picker'

export default function Example() {
  const [date, setDate] = useState<Date | null>(null)
  return <DatePicker selectedDate={date} onChange={setDate} />
}