Selecting Date and Time with UIDatePicker - iOS, Swift

UIDatePicker :

Apple made a ready-made user interface for picking data and time. We can use in our apps using UIDatePicker class.

The date picker is in fact a prepopulated picker view. Example of the date picker control is in the Calendar app, Clock app on the devices.

This Article Covers All Related questions  :

iOS DatePicker tutorial (UIDatePicker) using Swift.
UIDatePicker example in Swift.
Getting Started with the UIDatePicker for iOS Using Swift.
Creating or Making UIDatePicker programmatically.

Example Project :

First create a new project  open Xcode -> File -> New -> Project -> Single View App, then tap next button. Type product name as 'DatePicker' then tap next and select the folder to save project.

Let’s get started by first declaring a property of type UIDatePicker. Add following line above viewDidLoad() method:

var datePicker = UIDatePicker()

Add datePicker object to the view of our view controller. Add following method:

func adddatePicker() {
    view.addSubview(datePicker)
    datePicker.translatesAutoresizingMaskIntoConstraints = false
    datePicker.heightAnchor.constraint(equalToConstant: 250).isActive = true
    datePicker.leadingAnchor.constraint(equalTo:view.leadingAnchor).isActive = true
    datePicker.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    datePicker.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
}

Call adddatePicker() method inside viewDidLoad() method.

Now let’s Build & run the app and see how it looks

Adding UIDatePicker as Input View to UITextField Swift

We can see that the date picker, by default, has picked today’s date. UIDatePicker supports different modes. We can change mode by using datePickerMode property, of type UIDatePickerMode. Default mode is dateAndTime.

Based on our need,we can set the mode of date picker to any of the values listed in the UIDatePickerMode enumeration.

enum UIDatePickerMode : Int {
    
    case time // Displays hour, minute, and optionally AM/PM designation depending on the locale setting (e.g. 6 | 53 | PM)

    case date // Displays month, day, and year depending on the locale setting (e.g. November | 15 | 2007)

    case dateAndTime // Displays date, hour, minute, and optionally AM/PM designation depending on the locale setting (e.g. Wed Nov 15 | 6 | 53 | PM)

    case countDownTimer // Displays hour and minute (e.g. 1 | 53)
}

Just like UIButton, UIDatePicker sends action messages to its targets whenever the user scrolls date picker. Add following method, like so:

func datePickerChanged(datePicker: UIDatePicker){
    print("date = \(datePicker.date)")
}

To response to these messages, the receiver must add itself as the target of the date picker, add addTarget:action:forControlEvents: method in the end of adddatePicker() method, like so:

datePicker.addTarget(self, action: #selector(datePickerChanged(datePicker:)), for: .valueChanged)

Build and Run, every time the user scroll picker view, we will get message of the selected date from date picker.

The good thing about UIDatePicker is that, we can set maximum date and minimum date limits. So set the minimumDate and maximumDate properties to date picker as by adding following code at the end of adddatePicker() method:

let currentDate = Date()
let oneDay = 24 * 60 * 60
let minDate = currentDate.addingTimeInterval(TimeInterval(-10 * oneDay)) // before 10 days from now
let maxDate = currentDate.addingTimeInterval(TimeInterval(20 * oneDay)) // upto 20 Days from now

datePicker.minimumDate = minDate
datePicker.maximumDate = maxDate

We can then limit the user’s selection on the date to a specific range. In this example code, we limited the user’s input of dates to the range of 10 days to 20 days from now.

Run and try to select the date out of our range, it scrolls back to our limits.

Date picker as a countdown timer, you must set your date picker mode to UIDatePickerModeCountDownTimer and use the countDownDuration property of the date picker to specify the default countdown duration.

Suppose if we want to set default count Down duration to 5 min, then write the following code at the end of adddatePicker() method:

datePicker.datePickerMode = .countDownTimer
let fiveMin = TimeInterval(5 * 60)
datePicker.countDownDuration = fiveMin

Build and run, we can see result as follow :

Download sample project with examples :