Date Picker

"use client"

import * as React from "react"

About

The DatePicker is built using a composition of the <Popover /> and the <Calendar /> components.


pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/date-picker.json

import { DatePicker, DateRangePicker } from "@/components/ui/date-picker"

const [date, setDate] = React.useState<Date>()
 
return <DatePicker date={date} onDateChange={setDate} />

"use client"

import * as React from "react"

"use client"

import * as React from "react"

Use dropdown navigation to easily select a birth date with year/month selectors.

"use client"

import * as React from "react"

You can add presets for quick date selection.

"use client"

import * as React from "react"

Prop	Type	Default	Description
`date`	`Date`	-	The selected date
`onDateChange`	`(date: Date \| undefined) => void`	-	Callback when date changes
`placeholder`	`string`	`"Pick a date"`	Placeholder text
`className`	`string`	-	Additional CSS classes

Prop	Type	Default	Description
`dateRange`	`DateRange`	-	The selected date range
`onDateRangeChange`	`(range: DateRange \| undefined) => void`	-	Callback when range changes
`placeholder`	`string`	`"Pick a date range"`	Placeholder text
`numberOfMonths`	`number`	`2`	Number of months to display
`className`	`string`	-	Additional CSS classes