About Date Picker
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