Date range
2/10/2024
–2/20/2024
"use client"
import { parseDate } from "@internationalized/date"
import { DateRangePicker } from "@/components/ui/preskok-ui/date-range-picker"
export function DateRangePickerPreskokDemo() {
return (
<div className="max-w-sm">
<DateRangePicker
label="Date range"
visibleDuration={{ months: 2 }}
defaultValue={{
start: parseDate("2024-02-10"),
end: parseDate("2024-02-20"),
}}
/>
</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