Date Picker

Open-code aq-ui accessible component family for Date Picker.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

pnpm dlx aq-ui@alpha add date-picker

Client module

Import the parts you need, then jump to an export for its contract.

"use client"

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

<DatePicker />

Open-code aq-ui accessible component family for Date Picker.

const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(…)

Type contract for DatePickerProps.

interface DatePickerProps extends Omit< React.ComponentPropsWithoutRef<"div">, "children" | "defaultValue" | "onChange" >

Name	Type	Default
`value?`	`Date`	`—`
`defaultValue?`	`Date`	`—`
`onValueChange?`	`(date: Date \| undefined) => void`	`—`
`placeholder?`	`string`	`"Pick a date"`
`disabled?`	`boolean`	`—`
`fromDate?`	`Date`	`—`
`toDate?`	`Date`	`—`
`locale?`	`React.ComponentProps<typeof Calendar>["locale"]`	`—`
`formatDate?`	`(date: Date) => string`	`(date) => format(date, "PPP")`
`className?`	`string`	`—`
`calendarClassName?`	`string`	`—`
`name?`	`string`	`—`

button, calendar, popover, utils

date-fns@^4.4.0, lucide-react@^1.31.0