SwiftUI DatePicker & ColorPicker Tutorial: How to Pick Dates and Colors #Shorts #swiftuitutorial

SwiftUI DatePicker and ColorPicker tutorial: how to pick dates and colors in SwiftUI, choose a DatePicker style (compact, graphical or wheel), show only the date or only the time with displayedComponents, and hide opacity with supportsOpacity.

Both are system pickers that bind to a state property: DatePicker to a Date, ColorPicker to a Color. This Short shows each one in a real iPhone app in the iOS Simulator, with the exact code.

WHAT YOU'LL LEARN

• Bind a DatePicker to a Date in a @State property (here, a coffee pickup time).
• Compact, graphical and wheel styles, and how to set them with.datePickerStyle( ).
• displayedComponents: .date for the day only, .hourAndMinute for the time only.
• ColorPicker binds to a Color; tap the swatch to choose one.
• supportsOpacity: false hides the opacity controls.
• Which versions you need: compact and graphical dates, and ColorPicker, need iOS 14 or later.

THE CODE (as shown in the video)
@State private var pickup = Date.now

DatePicker("Pickup", selection: $pickup)
.datePickerStyle(.compact)

DatePicker("Pickup day", selection: $pickup,
displayedComponents: .date)

DatePicker("Pickup time", selection: $pickup,
displayedComponents: .hourAndMinute)

@State private var cupColor = Color.brown

ColorPicker("Cup color", selection: $cupColor)

ColorPicker("Cup color", selection: $cupColor,
supportsOpacity: false)

DATEPICKER STYLES

• .compact: shows just the date and time; tap it and a calendar opens.
• .graphical: shows the full calendar in place.
• .wheel: scrolling columns.

FAQ

• How do I show only the date (or only the time) in a SwiftUI DatePicker? Use displayedComponents: .date or displayedComponents: .hourAndMinute.
• How do I change the DatePicker style? Add.datePickerStyle(.compact), .datePickerStyle(.graphical) or.datePickerStyle(.wheel).
• How do I remove the opacity slider from ColorPicker? Pass supportsOpacity: false.
• Which iOS version do I need? DatePicker works from iOS 13. The compact and graphical styles, and ColorPicker, need iOS 14 or later.
• Can I limit the dates people can choose? Yes: DatePicker also takes a date range with its in: parameter (see Apple's DatePicker docs below).

WHAT'S IN THE VIDEO

0:00 A real compact DatePicker for a coffee pickup time

0:04 Binding a DatePicker to a Date in state

0:09 Compact: tap it and a calendar opens

0:14 Graphical: the full calendar in place

0:16 Wheel: scrolling columns

0:19 datePickerStyle and displayedComponents in code

0:25 ColorPicker binds to a Color: teal, then orange

0:33 supportsOpacity: false

0:37 Which iOS versions you need

0:43 Next video, then the Bugfender ending

COMMON MISTAKES

• Showing the date and the time when people only need one: use displayedComponents.
• Using.graphical in a tight form row: it takes the full calendar's height.
• Forgetting that compact and graphical need iOS 14 if you still support iOS 13.
• Leaving the opacity slider on when your design has no transparent colours.
• Comparing dates without thinking about time zones: what one device shows as the 14th can be the 13th on another.

TRY IT YOURSELF In Xcode, create a new iOS App project with the SwiftUI interface. Open ContentView.swift and paste the code above into the view's body (the @State lines go above body). Wrap it in a Form if you want the same layout as the video. Run it on an iPhone Simulator and try each style or option.

ABOUT THIS VIDEO
Real footage from the iOS 26.5 Simulator, built with Xcode 26.5 (deployment target iOS 17). The app, "Northstar Coffee", is a fictional demo. Every snippet on screen is copied from the demo app and compiles. The colour ring in the opening is an AI-generated graphic. The ending is an animation, and its pickup card and log lines are example data.

A DATE OR COLOR LOOKS DIFFERENT ON A USER'S DEVICE?
Dates depend on the device's time zone, calendar and locale, so log the date the user picked next to the date your app shows. Bugfender collects logs, errors and device context from real iOS and Android devices, so you can see what happened on that device and investigate the issue, even when the app doesn't crash. Get started for free: https://bugfender.com

SWIFTUI PICKERS SERIES (3 Shorts) SwiftUI Picker: fundamentals and styles (menu, inline, wheel, segmented) SwiftUI DatePicker and ColorPicker SwiftUI PhotosPicker: let people choose a photo
Next: choosing photos with PhotosPicker.

LINKS
DatePicker: https://developer.apple.com/documentation/swiftui/datepicker

datePickerStyle: https://developer.apple.com/documentation/swiftui/view/datepickerstyle

DatePickerComponents: https://developer.apple.com/documentation/swiftui/datepickercomponents

ColorPicker: https://developer.apple.com/documentation/swiftui/colorpicker

Bugfender: https://bugfender.com

#Shorts #SwiftUI #iOSDev