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
// iOS 14 and above
if #available(iOS 14, *) {// Added condition for iOS 14
datePicker.preferredDatePickerStyle = .wheels
datePicker.sizeToFit()
}
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
object2. Set
datePickerMode
you can change it as per your requirements3. Assign it to inputView
4. Create an object of
UIToolbar
5. Create
UIBarButtonItem
of type flexibleSpace to fill the gap6. Create a cancel
UIBarButtonItem
and add tapCancel as action7. Now create a done
UIBarButtonItem
and pass target
and selector
which we receive as a parameter in the function8. Set items to the
toolbar
9. Assign this toolbar as
inputAccessoryView
UIViewController class
Now move to yourUIViewController
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 UITextField2-2. Create a
DateFormatter
to get String from Date2-3. Set the
dateStyle
or date formate as you want2-4. Get the date in the string and set this in
UITextField
2-5. Resign the first responder here
Now run the code
awesome, makes it very easy and a reusable controller
I am doing the same, but done and cancel buttons are not visible on toolbar. Please help.