SwiftUI DatePicker tutorial – how to create and use DatePicker in SwiftUI

DatePicker is a control in SwiftUI which enables you to input (by selection) date and time values. In order to properly use a DatePicker, you need to back it with a State variable storing the selected date. This tutorial shows you how to create and use a DatePicker in SwiftUI.

In its simplest form, a DatePicker can be created like this:

struct ContentView: View {
    @State var selectedDate = Date()
    
    var body: some View {
        VStack {
            DatePicker("", selection: $selectedDate, displayedComponents: .date)
            Text("Your selected date: \(selectedDate)")
        }.padding()
    }
}

The result is presented below. It works as expected but it takes up a large chunk of screen. In the next section we’re going to fix it by placing the DatePicker in a Form.

DatePicker in SwiftUI
DatePicker in SwiftUI

DatePicker in a Form

A Form in SwiftUI is a container view which allows you to group controls used for data entry. By wrapping the DatePicker in a From, we’re giving it extra functionality – the date picker now becomes a single horizontal row with selected value in it. Tapping on the date picker row, reveals a DatePicker interface below it, and allows you to pick a date. Confirm a selection by tapping on the date picker row again to hide the selection interface.

Let’s take a look at the code. Update the body of your ContentView to reflect the new functionality:

var body: some View {
    Form {
        DatePicker("When is your birthday?", selection: $selectedDate, displayedComponents: .date)
    }
}

The result looks like this:

DatePicker in a Form in SwiftUI
DatePicker in a Form in SwiftUI

Pick Date and Time

In order to be able to select a date along with a time in the DatePicker, update the displayedComponents argument to include [.date, .hourAndMinute]:

DatePicker("Select event date and time", selection: $selectedDate, displayedComponents: [.date, .hourAndMinute])

The result looks like this:

DatePicker in SwiftUI with Date and Time selection
DatePicker in SwiftUI with Date and Time selection

It is also possible to allow time selection only by keeping .hourAndMinute as the only argument to displayedComponents.

Restrict dates by range

DatePicker lets you restrict the dates from a picker by using either a closed range or partial range. A closed range restricts both upper and lower date selection, whereas a partial range only restricts an upper or a lower bound of the selection. Let’s take a look how it works in practice.

Below example is using a ClosedRange to restrict date selection between two points in time, one five days ago and one two days ago. Note the added in: parameter to the DatePicker initializer:

struct ContentView: View {
    @State var selectedDate = Date()
    
    var closedRange: ClosedRange<Date> {
        let twoDaysAgo = Calendar.current.date(byAdding: .day, value: -2, to: Date())!
        let fiveDaysAgo = Calendar.current.date(byAdding: .day, value: -5, to: Date())!
        
        return fiveDaysAgo...twoDaysAgo
    }
    
    var body: some View {
        Form {
            DatePicker("Select event date and time", selection: $selectedDate, in: closedRange, displayedComponents: .date)
        }
    }
}

You can use a partial range to, for example restrict date selection up to today (so only allowing to pick dates from the past). The DatePicker initializer will now look like this:

DatePicker("Select event date and time", selection: $selectedDate, in: ...Date(), displayedComponents: .date)

In order to allow selection of future dates only, use the following range:

DatePicker("Select event date and time", selection: $selectedDate, in: Date()..., displayedComponents: .date)

Related tutorials: