Date Picker

iOS Drag-scroll date & time wheels

What it does A pixel-perfect recreation of the native iOS scroll-wheel picker, built entirely for Framer. Users can drag, scroll, click, or use arrow keys to select dates and times — with real momentum physics, snap-to-row animation, and infinite looping on time wheels. Four variants Time — hour, minute, AM/PM Date — scrollable day wheel (±5 years) Date + Time — both in one picker Time Range — from/to time selection Three display modes Inline — always visible on the page Dropdown — expands from a trigger field with auto-positioning Modal — centered overlay with backdrop What you can customize Everything. From the property panel, no code needed: Typography — separate font controls for selected row, dimmed rows, labels, and buttons (family, size, weight, style, spacing) Colors — independent color for each text role, plus a single accent color for buttons, icons, and chevron Surface — transparent (inherits page), auto (detects light/dark parent), or solid with custom color Layout — row height, visible rows (5 or 7), corner radius Buttons — show/hide confirm, cancel, and reset independently, custom labels, filled or text style, configurable order Time format — 12-hour with AM/PM or 24-hour clock Minute step — 1, 5, 15, or any interval up to 30 Date format — short, long, weekday+date, or auto Locale — any BCP-47 tag (en-US, fr-FR, ja-JP, etc.) for automatic month/day translation Animation — three presets: Snappy, Classic iOS, Smooth Trigger field — optional icon (calendar, clock, flag), custom label, configurable date/time format string For developers Controlled and uncontrolled modes (value/defaultValue + onChange/onConfirm) Output format: JS Date, ISO string, or structured object onChange fires live during scroll (for previews), onConfirm fires on button press (for saves) Fully typed TypeScript Use cases Booking & scheduling forms Event creation flows Alarm & reminder setting Delivery time selection - Any form that needs a date or time input with a premium feel

iOS Drag-scroll date & time wheels