A date picker popover for single dates and date ranges, with presets like last 7 days, optional time selection and quick month and year navigation. Great for filters and booking forms.
"use client";
import * as React from "react";
import { DatePicker } from "@/components/ui/date-picker";
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
const primitivePreviewCardSurfaceFrameClass = cn(
"relative isolate overflow-hidden rounded-2xl",
"border",
);
const primitivePreviewCardSurfaceLightClass = cn(
"border-black/[0.08] bg-[#f4f4f5]",
"[box-shadow:0_1px_2px_rgba(0,0,0,.06),0_8px_24px_-12px_rgba(0,0,0,.08)]",
);
const primitivePreviewCardSurfaceClass = cn(
primitivePreviewCardSurfaceFrameClass,
primitivePreviewCardSurfaceLightClass,
// Full static `dark:bg-[#0a0a0b]` kept for Tailwind content scan - same as
// PRIMITIVE_PREVIEW_CANVAS_DARK_BG / PRIMITIVE_PREVIEW_CANVAS_DARK.
"dark:border-white/[0.06] dark:bg-[#0a0a0b] dark:[box-shadow:0_1px_2px_rgba(0,0,0,.4),0_8px_24px_-12px_rgba(0,0,0,.6)]",
);
function Panel({
title,
subtitle,
children,
}: {
title: string;
subtitle?: string;
children: React.ReactNode;
}) {
return (
<div className={cn(primitivePreviewCardSurfaceClass, "mb-[440px] w-full max-w-sm p-4 sm:p-5")}>
<p className="mb-1 text-sm font-semibold tracking-[-0.015em] text-[var(--foreground)]">
{title}
</p>
{subtitle && (
<p className="mb-4 text-[11px] text-[var(--muted-foreground)]">{subtitle}</p>
)}
{!subtitle && <div className="mb-4" />}
{children}
</div>
);
}
export function DatePickerPreview() {
const [date, setDate] = React.useState<Date | undefined>();
return (
<Panel title="Single date" subtitle="Default mode, pick one date.">
<DatePicker value={date} onChange={setDate} placeholder="Pick a date" defaultOpen />
</Panel>
);
}
export default function Demo() {
return <DatePickerPreview />;
}