SwiftUI DatePicker : DatePicker Style

We can style DatePicker using datePickerStyle modifier. There are 4 values to choose from.

.automatic : sets DatePicker style based on system its being rendered.

.compact : sets DatePicker style to compact display which renders date and time views that can be tapped to reveal calendar and time picker.

.graphical : sets DatePicker style to display calendar view.

.wheel : sets DatePicker style to be displayed in selection wheel style.

Let’s look at them one by one.

.automatic DatePicker Style

struct DatePickerExample: View {
    @State private var date = Date()
    let dateRange: ClosedRange<Date> = {
        let calendar = Calendar.current
        let startComponents = DateComponents(year: 2021, month: 12, day: 15)
        let endComponents = DateComponents(year: 2021, month: 12, day: 30, hour: 23, minute: 59, second: 59)
        return calendar.date(from:startComponents)!
        ...
        calendar.date(from:endComponents)!
    }()
    
    var body: some View {
        DatePicker(
            "Pick a date", 
            selection: $date, 
            in: dateRange,
            displayedComponents: [.date, .hourAndMinute])
            .padding()
            .datePickerStyle(.automatic)
    }
}

.compact DatePickerStyle

struct DatePickerExample: View {
    @State private var date = Date()
    let dateRange: ClosedRange<Date> = {
        let calendar = Calendar.current
        let startComponents = DateComponents(year: 2021, month: 12, day: 15)
        let endComponents = DateComponents(year: 2021, month: 12, day: 30, hour: 23, minute: 59, second: 59)
        return calendar.date(from:startComponents)!
        ...
        calendar.date(from:endComponents)!
    }()
    
    var body: some View {
        DatePicker(
            "Pick a date", 
            selection: $date, 
            in: dateRange,
            displayedComponents: [.date, .hourAndMinute])
            .padding()
            .datePickerStyle(.compact)
    }
}

Note: .automatic and .compact look same in our case as the style for .automatic is a system pick.

.graphical DatePickerStyle

struct DatePickerExample: View {
    @State private var date = Date()
    let dateRange: ClosedRange<Date> = {
        let calendar = Calendar.current
        let startComponents = DateComponents(year: 2021, month: 12, day: 15)
        let endComponents = DateComponents(year: 2021, month: 12, day: 30, hour: 23, minute: 59, second: 59)
        return calendar.date(from:startComponents)!
        ...
        calendar.date(from:endComponents)!
    }()
    
    var body: some View {
        DatePicker(
            "Pick a date", 
            selection: $date, 
            in: dateRange,
            displayedComponents: [.date, .hourAndMinute])
            .padding()
            .datePickerStyle(.graphical)
    }
}

.wheel DatePickerStyle

struct DatePickerExample: View {
    @State private var date = Date()
    let dateRange: ClosedRange<Date> = {
        let calendar = Calendar.current
        let startComponents = DateComponents(year: 2021, month: 12, day: 15)
        let endComponents = DateComponents(year: 2021, month: 12, day: 30, hour: 23, minute: 59, second: 59)
        return calendar.date(from:startComponents)!
        ...
        calendar.date(from:endComponents)!
    }()
    
    var body: some View {
        DatePicker(
            "Pick a date", 
            selection: $date, 
            in: dateRange,
            displayedComponents: [.date, .hourAndMinute])
            .padding()
            .datePickerStyle(.wheel)
    }
}