Date Pickers

Last updated on 19 Oct 2024.

Written by Jia Chen.

Date Pickers

Last updated on 19 Oct 2024.

Written by Jia Chen.

Date Pickers

Last updated on 19 Oct 2024.

Written by Jia Chen.

Scroll Down

On this page

Video

On this page

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)

© 2024 Tinkertanker Pte Ltd / Swift Accelerator. All rights reserved.

© 2024 Tinkertanker Pte Ltd / Swift Accelerator. All rights reserved.

© 2024 Tinkertanker Pte Ltd / Swift Accelerator. All rights reserved.