Event date
mm/dd/yyyy
mm/dd/yyyy
"use client"
import {
DateRangePicker,
DateRangePickerTrigger,
} from "@/components/ui/preskok-ui/date-range-picker"
import { Label } from "@/components/ui/preskok-ui/field"
export function Component() {
return (
<div className="max-w-xs">
<DateRangePicker visibleDuration={{ months: 2 }}>
<Label>Event date</Label>
<DateRangePickerTrigger />
</DateRangePicker>
</div>
)
}
Installation
pnpmnpmyarnbunpnpm dlx @preskok-org/ui@latest add date-range-picker
Usage
import { parseDate } from "@internationalized/date"
import { DateRangePicker } from "@/registry/preskok/ui/preskok-ui/date-range-picker"
export function Example() {
return (
<DateRangePicker
label="Date range"
visibleDuration={{ months: 2 }}
defaultValue={{
start: parseDate("2024-02-10"),
end: parseDate("2024-02-20"),
}}
/>
)
}Props
- label: string
- description: string
- errorMessage: string | (validation) => string
- visibleDuration: DateDuration — months visible
- contentPlacement: placement of overlay
Features
- Two inputs with separator
- Responsive popover/modal overlay
- Keyboard and screen reader support