Creating a Date Picker

At its minimum, a Date Picker has to be supplied with a label, to describe the purpose of the date picker, and a Binding date to be changed by the date picker.

In the example below, a birthday date picker is created with a "Birthday" label and a selection date.

struct ContentView: View {
    
    @State private var date = Date.now
    
    var body: some View {
        DatePicker("Birthday", selection: $date)
    }
}

Basic Date Pickers

Text Label

Create a date State variable and assign it to the date picker with a Binding.

@State private var date = Date.now

DatePicker("Birthday", selection: $date)

Custom Label

You can also pass in a custom view as the label.

DatePicker(selection: $date) {
    Image(systemName: "birthday.cake")
}

Displayed Components

You can customize what components appear in the date picker, the date, the time, or both.

• To show just the date, use displayedComponents: .date

• To show just the time, use displayedComponents: .hourAndMinute

• To show both date and time, you can remove the displayedComponents parameter, or use displayedComponents: [.date, .hourAndMinute]

DatePicker("Birthday", selection: $date, displayedComponents: .date)

DatePicker(selection: $date, displayedComponents: .hourAndMinute) {
    Image(systemName: "birthday.cake")
}

Date Ranges

You can customize the date picker's range to limit the valid inputs. In order to customize the range, you will need to supply it with a date range.

• To create a custom date range with the Date type, use date ... anotherDate

• To restrict the user to selecting dates in the past, use ... Date.now

• To restrict the user to selecting dates in the future, use Date.now ...

In the following example, to create a date picker for a future event date, the Date.now ... range is used to only allow the user to select dates in the future. In the date picker, unavailable dates are greyed out.

@State private var eventDate: Date = .now

DatePicker("Event Date",
           selection: $eventDate,
           in: Date.now...)

This also works with the custom label type.

DatePicker(selection: $eventDate,
           in: Date.now...,
           displayedComponents: .hourAndMinute) {
    Image(systemName: "calendar")
}

Date Ranges with Displayed Components

Date ranges also work with Displayed Components, allowing you to create a date picker to select specific timings, or one that selects just a specific date.

In this example, a date picker can be used to allow the user to select a time after the current time to book an appointment.

DatePicker("Event Date",
           selection: $eventDate,
           in: Date.now..., 
           displayedComponents: .date)

Similarly, this is also possible with custom labels.

DatePicker(selection: $eventDate,
           in: Date.now..., 
           displayedComponents: .date) {
    Image(systemName: "calendar.badge.plus")
}

Styling Date Pickers

Like many other controls, date pickers also have a style modifier, datePickerStyle. The styles are cascading, allowing you to apply it to a parent or ancestor view and have all date pickers adopt the style.

DatePicker("Birthday",
           selection: $date,
           displayedComponents: ...)
.datePickerStyle(.compact)

Compact

.datePickerStyle(.compact)

Graphical

.datePickerStyle(.graphical)

Wheel

.datePickerStyle(.wheel)