Forms

Date Picker

A date picker component built with a Popover and Calendar. Supports single date and date range selection.

Installation

npx benflux-ui add date-picker

Single date

"use client"
import { useState } from "react"
import { DatePicker } from "@/components/ui/date-picker"

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

Date range

"use client"
import { useState } from "react"
import { DateRangePicker } from "@/components/ui/date-picker"
import type { DateRange } from "react-day-picker"

export default function Example() {
  const [range, setRange] = useState<DateRange>()
  return <DateRangePicker range={range} onSelect={setRange} />
}