Date Picker

Forms 5

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Date Picker to your project and fits it to your theme.

Code

How Date Picker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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 />;
}