DatePicker is a control that allows users to select a calendar date and time. View binds to a Date instance and gives user option to select date from graphical calendar control.


Let’s start with a simple example for DatePicker. We will create a State property of type Date to bind it with DatePicker as shown below:

struct DatePickerExample: View {
    @State private var date = Date()
    
    var body: some View {
        DatePicker("Pick a date and time", selection: $date)
            .padding()
    }
}

DatePicker shows date and time values in the view, when you tap on date or time sections, the pop-up is presented to make a selection.