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
Apple documentationnil
, 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.
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
Pingback: Compare two dates using swift in ios - iOSTutorialJunction
Pingback: Height of keyboard in swift - Programmatically - iOSTutorialJunction
Pingback: Swift Tutorial: Add UIDatePicker to UITextField - Software Mile.com