A visual reference to SwiftUI DatePicker styling for iOS and macOS

Feb 8, 2021 · 3 min read · SwiftUI iOS macOS ·

Each section below provides a snippet of code that configures a particular DatePicker, followed by the UI component created by iOS and macOS output for the specific component configuration.

-- Some SwiftUI styles are not available on both iOS and macOS. For example the Wheel style is iOS only; the Stepper style is macOS only. When this applies, it's called out.

-- UI Appearances below were captured on iOS 14.4 and macOS 11.1. iOS 13 do vary, and both platforms may vary in future releases.

Basic with no formatting options

1DatePicker("Prompt Text", selection: $selectedDate)

iOS

The default presentation for iOS on iOS14+ is the Compact style.

When either the date or time is tapped, a GraphicalDatePickerStyle component is lauched as a subview.

macOS

The default presentation for macOS is the StepperFieldDatePickerStyle

Date Only

1DatePicker("Prompt Text", 
2    selection: $selectedDate, displayedComponents: .date)

iOS

macOS

Hour and Minute

1DatePicker("Prompt Text", selection: $selectedDate, 
2                        displayedComponents: .hourAndMinute)

iOS

macOS

Graphical Style

1    DatePicker("Prompt Text", 
2                selection: $selectedDate)
3             .datePickerStyle(GraphicalDatePickerStyle())

iOS

macOS

Wheel Style

1    DatePicker("Prompt Text", 
2                   selection: $selectedDate)
3                 .datePickerStyle(WheelDatePickerStyle())
4                 .labelsHidden()

iOS

macOS

Not available.

Wheel with Time Only

1    DatePicker("Prompt Text", 
2          selection: $selectedDate, 
3          displayedComponents: .hourAndMinute)
4       .datePickerStyle(WheelDatePickerStyle())
5       .labelsHidden()

iOS

macOS

Not available.

Wheel with Label

Note the label will be displayed unless supressed with labelsHidden()

1    DatePicker("Prompt Text", 
2                 selection: $selectedDate, 
3                 displayedComponents: .hourAndMinute)
4       .datePickerStyle(WheelDatePickerStyle())

iOS

macOS

Not available.

Wheel with Border

1    DatePicker("Prompt Text", selection: $selectedDate)
2                 .datePickerStyle(WheelDatePickerStyle())
3                 .background(
4                    RoundedRectangle(cornerRadius: 30)
5                    .stroke(Color.purple, lineWidth: 3)
6                 )
7                 .foregroundColor(Color.purple)
8                 .labelsHidden()

iOS

macOS

Not available.

Custom Colors

1    DatePicker("Prompt Text", selection: $selectedDate)
2            .accentColor(.purple)
3            .background(RoundedRectangle(cornerRadius: 10)
4            .fill(Color.purple)
5            .opacity(0.2))
6            .datePickerStyle(GraphicalDatePickerStyle())

iOS

macOS

Dates ending with current date/time

Note the date 1/30/21 is grayed out, and unavailable. Any attempt to select a time later than 4:54pm results in the time returning to that time.

1    DatePicker("Prompt Text", 
2                 selection: $selectedDate, 
3                 in: ...Date())
4          .datePickerStyle(GraphicalDatePickerStyle())

iOS

Note that iOS omits the prompt text on GraphicalDatePickerStyle, even though it's not supressed in code.

macOS

On macOS, the time is changed by dragging the hour/minute hands with the mouse. The hands canot be dragged into the future.

1/30 cannot be selected, but it's not visually clear that it's not allowed (as it is on iOS).

Note macOS shows the prompt text (iOS does not).

Current Date and Future Only

1    DatePicker("Prompt Text", 
2               selection: $selectedDate, in: Date()...)
3           .datePickerStyle(GraphicalDatePickerStyle())

iOS

iOS makes it pretty clear what dates are open for selection.

macOS

It's not very clear that dates before 1/29 are un-selectable, but they dont' respond to mouse clicks.

Closed Date Range

 1    // pickerDateRange is defined as a view property
 2    var pickerDateRange : ClosedRange<Date> {
 3       let calendar = Calendar.current
 4       let startComponents = DateComponents(year: 2020, month: 12, day: 15)
 5       let endComponents = DateComponents(year: 2020, month: 12, day: 30, 
 6                                          hour: 23, minute: 59, second: 59)
 7       return 
 8    calendar.date(from:startComponents)!...calendar.date(from:endComponents)!
 9    }
10    
11    
12    // UI Code
13    DatePicker("Prompt Text", 
14                  selection: $selectedDate, in: pickerDateRange)
15              .datePickerStyle(GraphicalDatePickerStyle())
16              .labelsHidden()

iOS

macOS

As with the two open ranges, the closed range works as expectded, but it's not visually obvious to the user which dates are selectable.

Field

1    DatePicker("Prompt Text", 
2                 selection: $selectedDate, displayedComponents: .date)
3               .datePickerStyle(FieldDatePickerStyle())