Copyable single-date and range recipes using Calendar and Popover.
Preview
Usage
The installed block exports DatePickerDemo and DatePickerRangeDemo, each accepting scale. There is no generic DatePicker export. The single example keeps Date state internally; the range example owns a DateRange and displays two months.
Composition
The recipes combine PopoverTrigger, width-auto/padding-zero PopoverContent and Calendar. Single opens October 2026 by default. Range uses bounded dropdown captions from January 2020 through December 2030. date-fns formats the trigger labels with PPP or PP.
Two-month range
Interaction and limits
Selection does not automatically close the Popover. These blocks have no name or hidden-input form-submission contract: adapt the copied recipe to persist dates, serialize your form value or control open state. Full date-picker layout is a web adaptation built from declared native constituents.
See the upstream API for the underlying part and event contracts.
Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import { format } from "date-fns";
import * as React from "react";
import type { DateRange } from "react-day-picker";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import {
Popover,
PopoverContent,
PopoverTrigger,