New UIDatePicker style in iOS 14

In iOS 14, Apple introduced a new property of UIDatePicker which is datePickerStyle, because of this UIDatePicker creating issue with UITextField inputView. From iOS 14 and above you need to set the datePickerStyle in order to make it work.

Note: For this tutorial, you will need Xcode 12, at the time of writing this article.

Let’s start.

Create new project in Xcode and open Main.storyboard and add UIDatePicker in ViewController then assign it IBOutlet.

Now open ViewController.Swift file and attach below code.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var datepicker: UIDatePicker!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        if #available(iOS 14, *) {
                       datepicker.preferredDatePickerStyle = .inline
                   }
    }


}

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var datepicker: UIDatePicker!

override func viewDidLoad() {

super.viewDidLoad()

// Do any additional setup after loading the view.

if #available(iOS 14, *) {

datepicker.preferredDatePickerStyle = .inline

}

Run the application in your simulator or your device.

Now, we don’t need the date picker to be on screen the whole time, we may want to click on a button and pick the date from the picker like before.

import UIKit
class ViewController: UIViewController {
    @IBOutlet weak var datePicker: UIDatePicker!
    override func viewDidLoad() {
        super.viewDidLoad()
        
            if #available(iOS 13.4, *) {
                datePicker.preferredDatePickerStyle = .compact
            }
    }
}

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var datePicker: UIDatePicker!

override func viewDidLoad() {

super.viewDidLoad()

if #available(iOS 13.4, *) {

datePicker.preferredDatePickerStyle = .compact

}

That’s it. Now, if you run the application. Your app should function like the one shown below.

It automatically updates the date so you don’t need to look into the handling of the date object. This is significant relief from those bottom sheets and custom pop-ups.