UIDatePicker as inputView to UITextField Swift

This is very common to show UIDatePicker to choose the date of birth, event date and time, adding reminder time, start date and end date, etc. Using UITextField Extension we are going to make it super easy and we can use this throughout the projects. Let’s not wait anymore and start coding.
– Create a new project
– Add swift file and name it UITextField+InputView.swift

UITextField Extension

Now add below code in this file.
import UIKit
extension UITextField {
    
    func setInputViewDatePicker(target: Any, selector: Selector) {
        // Create a UIDatePicker object and assign to inputView
        let screenWidth = UIScreen.main.bounds.width
        let datePicker = UIDatePicker(frame: CGRect(x: 0, y: 0, width: screenWidth, height: 216))//1
        datePicker.datePickerMode = .date //2
        self.inputView = datePicker //3
        
        // Create a toolbar and assign it to inputAccessoryView
        let toolBar = UIToolbar(frame: CGRect(x: 0.0, y: 0.0, width: screenWidth, height: 44.0)) //4
        let flexible = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil) //5
        let cancel = UIBarButtonItem(title: "Cancel", style: .plain, target: nil, action: #selector(tapCancel)) // 6
        let barButton = UIBarButtonItem(title: "Done", style: .plain, target: target, action: selector) //7
        toolBar.setItems([cancel, flexible, barButton], animated: false) //8
        self.inputAccessoryView = toolBar //9
    }
    
    @objc func tapCancel() {
        self.resignFirstResponder()
    }
    
}
1. Create a UIDatePicker object
2. Set datePickerMode you can change it as per your requirements
3. Assign it to inputView
4. Create an object of UIToolbar
5. Create UIBarButtonItem of type flexibleSpace to fill the gap
6. Create a cancel UIBarButtonItem and add tapCancel as action
7. Now create a done UIBarButtonItem and pass target and selector which we receive as a parameter in the function
8. Set items to the toolbar
9. Assign this toolbar as inputAccessoryView

UIViewController class

Now move to your UIViewController class, drag and drop a UITextField and create an IBOutlet of this and add below code
class ViewController: UIViewController {
    
    @IBOutlet weak var myTextField: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        self.myTextField.setInputViewDatePicker(target: self, selector: #selector(tapDone)) //1
    }
    
    //2
    @objc func tapDone() {
        if let datePicker = self.myTextField.inputView as? UIDatePicker { // 2-1
            let dateformatter = DateFormatter() // 2-2
            dateformatter.dateStyle = .medium // 2-3
            self.myTextField.text = dateformatter.string(from: datePicker.date) //2-4
        }
        self.myTextField.resignFirstResponder() // 2-5
    }
    
}
1. In our viewDidLoad function, we have written only one line of code and calling UITextField Extension function with target and selector parameters.
2. This function will be called when you tap on the Done button over the toolbar
2-1. Getting UIDatePicker from inputView of UITextField
2-2. Create a DateFormatter to get String from Date
2-3. Set the dateStyle or date formate as you want
2-4. Get the date in the string and set this in UITextField
2-5. Resign the first responder here
Now run the code

Read the next article: Add done button over keyboard using UITextField Extension

2 comments on “UIDatePicker as inputView to UITextField Swift

Leave a Reply

Your email address will not be published. Required fields are marked *