---
title: "Date Picker — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Giollesco · Forms. iOS Drag-scroll date & time wheels"
canonical: "https://framer.elliotli.dev/component/iosdatepicker"
---

[Home](/)/[Components](/components)/[Forms](/components/category/forms)/Date Picker

# Date Picker

iOS Drag-scroll date & time wheels

[View on Framer](https://framer.com/marketplace/components/iosdatepicker/?via=elliot-li)

![Date Picker preview image 1](https://framer.elliotli.dev/og/component/iosdatepicker/2d9a8e63ec8173e2/1600x1200.jpg)

## Summary

iOS Drag-scroll date & time wheels

## Description

**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
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-k438ap02-IhjsXWx31prdk9JZgKXM97XExAZGHm)

## Rank history [How rankings work →](/terms#rankings)

-   All · #6696

## Details

- **Author**: Giollesco
- **Price**: $5.00
- **Published**: 2026-05-13
- **Updated**: 2026-06-02
- **Added**: 2026-05-03
- **Categories**: Forms

## More across types

-   [Wallble: Guest Book & Wall of Love](/plugin/wallble-guest-book-wall-of-love) — Wallble · Free — Guest book & Wall of Love

## More like this

-   [Stay Booking Pro](/component/stay-booking-pro) — Design Foundry · $10 — Stay Planner with Dynamic Pricing
-   [Postcode Checker](/component/postcode-checker) — Sean Weekes · $15 — Do we cover your area? (UK
-   [Property Calculators](/component/property-calculators) — Sean Weekes · $12 — UK Stamp Duty, mortgage and yield
-   [UTM Lead Capture](/component/utm-lead-capture) — Sean Weekes · $9 — See where every lead came from