57:I[473921,["/creators-assets/_next/static/immutable/chunks/2mufb5vfxu89s.js","/creators-assets/_next/static/immutable/chunks/1__2xzczq2pwn.js","/creators-assets/_next/static/immutable/chunks/2kn0bu6tvfjta.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/3mwqlk6tp5l2t.js","/creators-assets/_next/static/immutable/chunks/00ucqynnajlsr.js","/creators-assets/_next/static/immutable/chunks/1q7v4rdbqi_5d.js","/creators-assets/_next/static/immutable/chunks/2fw--q9y_1nc-.js","/creators-assets/_next/static/immutable/chunks/1w_rozgc2dplq.js","/creators-assets/_next/static/immutable/chunks/0dglr8x18qkm5.js","/creators-assets/_next/static/immutable/chunks/0a8vglvd9phm3.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/42u1pxaq7eeka.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/2bbm33yuxi64a.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/0kjwwabuczr28.js","/creators-assets/_next/static/immutable/chunks/382o7gg6l86xy.js","/creators-assets/_next/static/immutable/chunks/22zq93dcklbwz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/02-x_1qnbh38n.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3g7os-hf6q3tv.js","/creators-assets/_next/static/immutable/chunks/1e3mmtw6okz19.js","/creators-assets/_next/static/immutable/chunks/2ww-ud7wb5tjj.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/28h79imj-g45k.js","/creators-assets/_next/static/immutable/chunks/2x3imtac9af--.js","/creators-assets/_next/static/immutable/chunks/2t6l_zgbmmx8u.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/1bav8vveixprt.js","/creators-assets/_next/static/immutable/chunks/3-uff2nrv83hw.js","/creators-assets/_next/static/immutable/chunks/0alicgkopr9se.js","/creators-assets/_next/static/immutable/chunks/0-kepukl8ldjk.js","/creators-assets/_next/static/immutable/chunks/2-u6q7fsgfx0e.js"],"PostDetailCard"] 58:Tc07,

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

54:[["$","$L57",null,{"post":{"id":"019e2103-fce4-7432-a778-18594473bb1d","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"753f1085-0137-4d25-8789-72166c303b27","name":"Giollesco","slug":"giollesco","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"db4yHhw1N4jqXWFqx6mN","resolved":true,"title":"Date Picker","body":"$58","bodyJson":null,"introduction":"iOS Drag-scroll date & time wheels","slug":"iosdatepicker","author":{"framerUserId":"753f1085-0137-4d25-8789-72166c303b27","name":"Giollesco","slug":"giollesco","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/db4yHhw1N4jqXWFqx6mN/iosdatepicker-X2YXYh34GZYE9g13ItJHJ9SpyoHs65","metadata":{"tint":{"h":215,"s":93,"l":30},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-03T14:23:06.225Z","updatedAt":"2026-06-02T11:53:52.048Z","publishedAt":"2026-05-13T11:06:10.020Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://innocent-maintenance-105268.framer.app/","price":"5","paymentUrl":"https://ivandjolo.gumroad.com/l/xtytr","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"CvbniWYDByA0LWEdJrvJ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-13T11:06:10.020Z","updatedAt":"2026-05-13T11:06:10.020Z","reported":false,"type":"post"}}],"$L59"]

Suggested for you