Skip to content
Drivn logoDrivn

Date Picker

Date picker input with Calendar dropdown for single date and range selection.

Preview

March 2026

Installation

npx drivn add date-picker

Usage

Import DatePicker and manage selection with useState.

1import { useState } from "react"
2import { DatePicker } from "@/components/ui/date-picker"
3
4export default function Page() {
5  const [date, setDate] = useState<Date | undefined>()
6
7  return (
8    <DatePicker
9      selected={date}
10      onSelect={setDate}
11    />
12  )
13}

Range Selection

Use DatePicker.Range for selecting a date range.

March 2026

Month / Year Dropdown

Quick navigation with month and year dropdowns.

March 2026

Custom Format

Pass a formatDate function to control date display.

March 2026

Locale

Pass a locale object from react-day-picker/locale to localize the calendar dropdown.

březen 2026

API Reference

DatePicker

PropTypeDefaultDescription
selectedDate | undefined—The currently selected date
onSelect(date: Date | undefined) => void—Callback when a date is selected
placeholderstring"Pick a date"Text shown when no date is selected
formatDate(date: Date) => stringtoLocaleDateStringCustom date formatting function
disabledbooleanfalseDisables the trigger button
variant"default" | "weekNumbers" | "dropdown""default"Calendar variant forwarded to the dropdown
fromYearnumbercurrentYear - 20First year in the dropdown variant
toYearnumbercurrentYear + 20Last year in the dropdown variant
localePartial<Locale>—Locale object from react-day-picker/locale for localization
defaultMonthDateselectedThe month to display on initial render
classNamestring—Additional CSS classes for the root element

DatePicker.Range

PropTypeDefaultDescription
selectedDateRange | undefined—The currently selected date range ({ from, to })
onSelect(range: DateRange | undefined) => void—Callback when a date range is selected
placeholderstring"Pick a date range"Text shown when no range is selected
formatDate(date: Date) => stringtoLocaleDateStringCustom date formatting function applied to both dates
disabledbooleanfalseDisables the trigger button
localePartial<Locale>—Locale object from react-day-picker/locale for localization
defaultMonthDateselected.fromThe month to display on initial render
classNamestring—Additional CSS classes for the root element