At WWDC20 Apple released an update to their standard DatePicker control. From iOS14  your date picker won't be the scroll wheel by default, but a new compact or inline style that's much more user friendly and easy on the eye.

In this short post i'll take you through how to leverage this in SwiftUI and how each style looks on device.

This is currently every style of picker SwiftUI supports, there are three kinds, from top to bottom they are.

  • CompactDatePickerStyle
  • WheelDatePickerStyle
  • GraphicalDatePickerStyle

There's also a fourth option - DefaultDatePickerStyle - but this appears to be the same as CompactDatePickerStyle. You can customise the fields you want to capture by passing in DatePickerComponents to the constructor as shown in the second date picker from the top, i'm using displayedComponents: .hourAndMinute to only display the time.

To show these DatePickers in your view, simple add the following code.

struct DatePickerDemo: View {
    @State var date: Date = Date()
    
    var body: some View {
        VStack {
            DatePicker("Date", selection: $date)
                .datePickerStyle(CompactDatePickerStyle())
                .frame(height: 50)
            DatePicker("Date", selection: $date,
                       displayedComponents: .hourAndMinute)
                .frame(height: 50)
            DatePicker("Date", selection: $date)
                .datePickerStyle(WheelDatePickerStyle())
            DatePicker("Date Picker", selection: $date)
                .datePickerStyle(GraphicalDatePickerStyle())
            Spacer()
        }
        .padding()
    }
}

Tapping a DatePicker where the style is CompactDatePickerStyle presents a modal version of GraphicalDatePickerStyle like so.

Thanks for reading ✌️