Skip to content
Date Wheel preview
Rendered from the SwiftUI source on this page.

Date Wheel

From syxUI — written for both platforms, not translated between them.

An iOS wheel date picker.

Inputs · SwiftUI · iOS 17

  • inputs
  • swiftui

The actual source

PickerDateWheel.swift
// Date Wheel · syxUI · https://syxui.dev/components/picker-date-wheel
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

func wheelColumn(_ col: [String], big: CGFloat) -> some View {
    VStack(spacing: 8) {
        ForEach(Array(col.enumerated()), id: \.offset) { i, v in
            Text(v).font(.system(size: i == 1 ? big : big - 4, weight: i == 1 ? .semibold : .regular)).foregroundStyle(i == 1 ? Color.primary : Color.secondary.opacity(0.4))
        }
    }.frame(maxWidth: .infinity)
}

struct PickerDateWheel: View {
    let cols: [[String]] = [["June", "July", "August"], ["23", "24", "25"], ["2025", "2026", "2027"]]
    var body: some View {
        HStack(spacing: 0) { ForEach(Array(cols.enumerated()), id: \.offset) { _, col in wheelColumn(col, big: 20) } }
            .padding(.vertical, 14).frame(width: 300)
            .overlay { RoundedRectangle(cornerRadius: 8).fill(Color.primary.opacity(0.05)).frame(height: 30) }
            .overlay(RoundedRectangle(cornerRadius: 14, style: .continuous).stroke(Color.primary.opacity(0.08), lineWidth: 1))
    }
}
iOS 17 · No dependencies

Dependencies

SwiftUI
No external dependencies

Requires iOS 17