Swift Tutorial: Add UIDatePicker to UITextField

In this tutorial, we will learn how to show UIDatePicker on clicking UItextField. This kind of requirement comes up while user need to enter some kind of date as input with other fields. There are two solutions for this kind of requirement

• Add UIButton and on touch of it show UIDatePicker to user and set UIButton Title text as per date selected.
• Use UItextField and add UIDatePicker as inputView to it.

In this tutorial we will follow second approach, i.e. adding UIDatePicker as inputView to our UITextField.

Add UIDatePicker as inputView to UITextField

So for achieving our goal, showing UIDatePicker to user when user tap on UITextField. We wil use inputView property of UItextField. InputView property, as per apple documentation

If the value in this property is nil, the text field displays the standard system keyboard when it becomes first responder. Assigning a custom view to this property causes that view to be presented instead.

Apple documentation

So, if we specify UIDatePicker as inputview to UItextField then system will not present keyboard to user and will show custom view, which in our case is UIDatePicker. We will use extension class to add UIDatePicker to UITextField. Below is the code for same

import UIKit

extension UITextField {
    
    func setDatePickerAsInputViewFor(target:Any, selector:Selector) {
        let screenWidth = UIScreen.main.bounds.width
        let datePicker = UIDatePicker(frame: CGRect(x: 0.0, y: 0.0, width: screenWidth, height: 200.0))
        datePicker.datePickerMode = .date
        self.inputView = datePicker
        
        let toolBar = UIToolbar(frame: CGRect(x: 0.0, y: 0.0, width: screenWidth, height: 40.0))
        let cancel = UIBarButtonItem(title: "Cancel", style: .plain, target: self, action: #selector(tapCancel))
        let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
        let done = UIBarButtonItem(title: "Done", style: .done, target: nil, action: selector)
        toolBar.setItems([cancel,flexibleSpace, done], animated: false)
        self.inputAccessoryView = toolBar
    }
    
    @objc func tapCancel() {
        self.resignFirstResponder()
    }
}

In above code we also added UIToolBar so that we can ask user about his confirmation.

Using UITextField extension in our main codebase

In your code where you want to show UIDatePicker to user on click of UItextField. Use below code

class ViewController: UIViewController {
    @IBOutlet weak var txtDate: UITextField!
  
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        self.txtDate.setDatePickerAsInputViewFor(target: self, selector: #selector(dateSelected))
    }
    
    @objc func dateSelected() {
        if let datePicker = self.txtDate.inputView as? UIDatePicker {
            let dateFormatter = DateFormatter()
            dateFormatter.dateStyle = .medium
            self.txtDate.text = dateFormatter.string(from: datePicker.date)
        }
        self.txtDate.resignFirstResponder()
    }
}

In above code, we used the function of UITextField extension and set UIDatePicker as inutView for our UITextField. Also we create a selector named dateSelected, that will get called when user tap on done button of UIToolBar.

Where to go from here

In this post we learned, how to show UIDatePicker when user tap on or UIDatepicker on clicking UITextField. We followed a very super easy way to add UIDatePicker to UITextField in swift using extensions feature of siwft langauge. You can download source code from below link

Source code: http://bit.ly/3a0yfQc