About
A date field with a trigger button and a dropdown month calendar for picking a single day, with full keyboard navigation and no third-party date library.
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 DatePicker from "@/components/ui/date-picker";
import { useState } from "react";
export default function DatePickerEmptyDisabledDemo() {
const [empty, setEmpty] = useState("");
return (
<div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
<div style={{ width: 240 }}>
<DatePicker
value={empty}
onChange={setEmpty}
placeholder="Pick a date"
/>
</div>
<div style={{ width: 240 }}>
<DatePicker value="2026-01-01" disabled />
</div>
</div>
);
}