Pick a date
1/20/2024
"use client"
import { parseDate } from "@internationalized/date"
import { DatePicker } from "@/components/ui/preskok-ui/date-picker"
export function DatePickerPreskokDemo() {
return (
<div className="max-w-xs">
<DatePicker
label="Pick a date"
granularity="day"
defaultValue={parseDate("2024-01-20")}
/>
</div>
)
}
Installation
pnpmnpmyarnbunpnpm dlx @preskok-org/ui@latest add date-picker
Usage
import { parseDate } from "@internationalized/date"
import { DatePicker } from "@/registry/preskok/ui/preskok-ui/date-picker"
export function Example() {
return (
<DatePicker
label="Pick a date"
granularity="day"
defaultValue={parseDate("2024-01-20")}
/>
)
}Props
- label: string — Field label.
- description: string — Help text.
- errorMessage: string | (validation) => string — Error text.
- placement: Popover placement.
- Inherits all
react-aria-componentsDatePicker props.
Features
- Responsive overlay: popover on desktop, modal on mobile
- Keyboard and screen reader support
- Validation and error messaging