Date Picker

A date picker component with range and presets.

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/date-picker.json

Usage

"use client";

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

const [date, setDate] = useState<Date | undefined>();

<DatePicker date={date} onDateChange={setDate} />

Range Picker

Set mode to range on the underlying Calendar to select a start and end date.

Date of Birth

Set captionLayout to dropdown for quick month and year navigation, useful for dates far in the past.