About
iOS-style date picker with 3D scrollable wheels for day, month, and year. Supports drag, mouse wheel, and keyboard navigation.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Date Wheel Picker to your project and fits it to your theme.
Code
How Date Wheel Picker is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { useState } from "react"
import { DateWheelPicker } from "@/components/ui/date-wheel-picker"
export default function DateWheelPickerDemo() {
const [date, setDate] = useState(new Date(1990, 5, 15))
return (
<div className="flex flex-col items-center justify-center min-h-screen gap-4 p-8 bg-background">
<DateWheelPicker value={date} onChange={setDate} size="md" />
<p className="text-sm text-muted-foreground mt-2">
{date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}
</p>
</div>
)
}Dependencies
More by johuniq
View all
Liquid Metal Button
3.2K
AI Prompt Box
154
Animated Theme Toggle
99
Joly Button
76