DatePicker in SwiftUI

by

DatePicker allows users to select a date or time. Here’s a basic example of how you can use a DatePicker to select a date in SwiftUI:

 DatePicker("Select a Date", selection: $selectedDate)

Like other input, we have to provide a State variable as selection in DatePicker, that will hold the selected date:

import SwiftUI
struct ContentView: View {
    @State var selectedDate = Date()
    var body: some View {
        VStack{
            DatePicker("Select a Date", selection: $selectedDate)
 
            Text("\(selectedDate)")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Output:

By default, DatePicker let user to select both date and time. But if we only need to pick date, we can specify using displayedComponents: .date parameter. If we only need hour and minutes, we can specify using displayedComponents: .hourAndMinute.

DatePicker Date Range

Using in parameter, we can restrict the selectable dates within the specified range. For instance, if our aim is to exclusively obtain future dates, we can achieve this through:

DatePicker("Select a Date", selection: $selectedDate,  in: Date()...)

We will see that, we can only pick future date:

If we want to select only past date:

  DatePicker("Select a Date", selection: $selectedDate,  in: ...Date())

We can set custom date range too:

DatePicker("Select a Date", selection: $selectedDate, in: Date()...Date.now.addingTimeInterval(24.0 * 3600.0) )

This DatePicker will let user to select a date or time from now to tomorrow. Hope you get the idea. We can create custom date range and pass it to in parameter:

import SwiftUI
struct ContentView: View {
    @State var selectedDate = Date()
    
    let dateRange: ClosedRange<Date> = {
          let calendar = Calendar.current
          let startDate = calendar.date(byAdding: .year, value: -1, to: Date())!
          let endDate = calendar.date(byAdding: .year, value: 1, to: Date())!
          return startDate...endDate
      }()
    
    
    var body: some View {
        VStack{
            DatePicker("Please select a date", selection: $selectedDate, in: dateRange)
            
            Text("\(selectedDate)")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

In this example, we have created a ClosedRange variable to a range spanning one year in the past to one year in the future. Using this picker, user will be able to select a date between one year from past or future.

You can adjust the dateRange to fit your specific needs, such as limiting the range to a specific month, week, or any other desired time frame.

DatePicker Style:

We can change default style of date picker suing .datePickerStyle(). We can use .graphical, .compact or .automatic parameter. We can also use WheelDatePickerStyle() like this:

import SwiftUI
struct ContentView: View {
    @State var selectedDate = Date()
    var body: some View {
        VStack{
            DatePicker("Select a Date", selection: $selectedDate,  displayedComponents: .date)
                .datePickerStyle(WheelDatePickerStyle())
 
            Text("\(selectedDate)")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Leave a Reply