How to set DatePicker Style in SwiftUI

DevTechie Inc
Dec 7, 2022


Photo by Henry & Co. on Unsplash

DatePickerStyle protocol is used to specify the appearance and interaction of all date pickers in a view hierarchy. This protocol is used with the datePickerStyle(_:) view modifier and it sets the DatePicker’s style.

Let’s look at these styles with example.

We will start by creating a DatePicker and expand upon that example with style variations.

struct DevTechieDatePickerStyle: View {
    @State var date = Date()var body: some View {
        NavigationView {
            DatePicker("Let's pick a date", selection: $date)
                .navigationTitle("DevTechie.com")
        }
    }
}
DefaultDatePickerStyle
As mentioned, to apply DatePickerStyle, we use datePickerStyle(_:) modifier. We will add style and set its value to be .automatic .

.automatic is the default style for date pickers. It means that DatePicker will be styled based upon the context it's being shown.


struct DevTechieDatePickerStyle: View {
    @State var date = Date()var body: some View {
        NavigationView {
            DatePicker("Let's pick a date", selection: $date)
                .datePickerStyle(.automatic)
                .navigationTitle("DevTechie.com")
        }
    }
}

Our output will remain same as before because automatic is the default style applied to all DatePickers


CompactDatePickerStyle
CompactDatePickerStyle is a style that displays the date components in a compact textual format. This style is used when the space is constrained and users are expected to make specific date and time selections.

struct DevTechieDatePickerStyle: View {
    @State var date = Date()var body: some View {
        NavigationView {
            DatePicker("Let's pick a date", selection: $date)
                .datePickerStyle(.compact)
                .navigationTitle("DevTechie.com")
        }
    }
}

Note: the default for iOS is the compact style meaning in iOS compact and automatic will render the same UI for DatePicker but the style is now set to show compact for all other platforms as well so even if the space is available to show full graphical DatePicker, system will honor our choice and will keep the DatePicker compact.


GraphicalDatePickerStyle
GraphicalDatePickerStyle sets the DatePicker style to display an interactive calendar or clock view. This style is useful when we want to allow browsing through days in a calendar, or when the look of a clock face is appropriate.

struct DevTechieDatePickerStyle: View {
    @State var date = Date()var body: some View {
        NavigationView {
            DatePicker("Let's pick a date", selection: $date)
                .datePickerStyle(.graphical)
                .navigationTitle("DevTechie.com")
        }
    }
}

WheelDatePickerStyle
This DatePickerStyle displays each component as a columns in a scrollable wheel.

struct DevTechieDatePickerStyle: View {
    @State var date = Date()var body: some View {
        NavigationView {
            DatePicker("Let's pick a date", selection: $date)
                .datePickerStyle(.wheel)
                .navigationTitle("DevTechie.com")
        }
    }
}


Custom DatePickerStyle
Starting iOS 16, we can customize look at feel of DatePicker by creating our own style. We do this by conforming to DatePickerStyle protocol. An example paint a better picture.

CustomDatePickerStyle

struct CustomDatePickerStyle: DatePickerStyle {
    @State private var currentDate = Date()
    func makeBody(configuration: Configuration) -> some View {
        VStack {
            configuration.label
                .font(.title)
                .padding()
                .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 20))
                
            HStack {
                
                Button {
                    currentDate = Calendar.current.date(byAdding: .day, value: -1, to: currentDate)!
                } label: {
                    Image(systemName: "minus.circle")
                        .font(.title)
                        .padding()
                        .background(.thinMaterial)
                        .clipShape(Circle())
                }Text(currentDate.formatted(date: .abbreviated, time: .shortened))
                
                Button {
                    currentDate = Calendar.current.date(byAdding: .day, value: 1, to: currentDate)!
                } label: {
                    Image(systemName: "plus.circle")
                        .font(.title)
                        .padding()
                        .background(.thinMaterial)
                        .clipShape(Circle())
                }
            }
        }
    }
}
Usage in the view:

struct DevTechieDatePickerStyle: View {
    @State var date = Date()var body: some View {
        NavigationView {
            DatePicker("Let's pick a date", selection: $date)
                .datePickerStyle(CustomDatePickerStyle())
                .navigationTitle("DevTechie.com")
        }
    }
}

DatePickerStyle in Forms
Forms are compact so by default DatePickers are rendered with compact style as well but we can always choose to specify the style per app’s need.

Let’s build an example to use all the available iOS DatePicker styles along with our own custom style.

struct DevTechieDatePickerStyle: View {
    @State var date = Date()
    var body: some View {
        NavigationView {
            Form {
                Section {
                    DatePicker("Pick a date", selection: $date)
                } header: {
                    Text("Default/Automatic Style")
                }
                
                Section {
                    DatePicker("Pick a date", selection: $date)
                        .datePickerStyle(.graphical)
                } header: {
                    Text("Graphical Style")
                }
                
                Section {
                    DatePicker("Pick a date", selection: $date)
                        .datePickerStyle(.wheel)
                } header: {
                    Text("Wheel Style")
                }
                
                Section {
                    DatePicker("Pick a date", selection: $date)
                        .datePickerStyle(CustomDatePickerStyle())
                } header: {
                    Text("Custom DatePickerStyle")
                }
            }
            .navigationTitle("DevTechie.com")
        }
    }
}


We have a bug for our custom DatePickerStyle as the whole row is clickable and because of that user tap is not reaching the actual buttons in the date picker. In order to resolve this we will specifying buttonStyle as plain for Section so the whole row is not tappable, this will make our custom picker buttons to work properly in the forms space.

struct DevTechieDatePickerStyle: View {
    @State var date = Date()
    var body: some View {
        NavigationView {
            Form {
                Section {
                    DatePicker("Pick a date", selection: $date)
                } header: {
                    Text("Default/Automatic Style")
                }
                
                Section {
                    DatePicker("Pick a date", selection: $date)
                        .datePickerStyle(.graphical)
                } header: {
                    Text("Graphical Style")
                }
                
                Section {
                    DatePicker("Pick a date", selection: $date)
                        .datePickerStyle(.wheel)
                } header: {
                    Text("Wheel Style")
                }
                
                Section {
                    DatePicker("Pick a date", selection: $date)
                        .datePickerStyle(CustomDatePickerStyle())
                } header: {
                    Text("Custom DatePickerStyle")
                }
                .buttonStyle(.plain)
            }
            .navigationTitle("DevTechie.com")
        }
    }
}


MacOS specific DatePickerStyles
There are two MacOS specific picker styles which only work for MacOS.

  • FieldDatePickerStyle: A date picker style that displays the components in an editable field.
  • StepperFieldDatePickerStyle: A system style that displays the components in an editable field, with adjoining stepper that can increment/decrement the selected component.


With that we have reached the end of this article. Thank you once again for reading. Don’t forget to follow 😍. Also subscribe our newsletter at https://www.devtechie.com