Add a Done button within a pop-up datePickerView in Swift?

Question

I want to add a Done button within a popped up datePickerView in Swift.

Here is the code:

@IBOutlet var datePicker: UITextField!

@IBAction func dateTextInputPressed(sender: UITextField) {

    var datePickerView = UIDatePicker()
    datePickerView.datePickerMode = UIDatePickerMode.Date

    sender.inputView = datePickerView
    datePickerView.addTarget(self, action: Selector("handleDatePicker:"), forControlEvents: UIControlEvents.ValueChanged)
}

func handleDatePicker(sender: UIDatePicker) {
    var dateFormatter = NSDateFormatter()
    dateFormatter.dateFormat = "yyyy-MM-dd"
    datePicker.text = dateFormatter.stringFromDate(sender.date)
}

I can use this code to pop up a datePickerView successfully.

But after I've selected the date, it does not have a "Done" button to dismiss it.

So how can I add the Done button into it?

Answer 1

I made this extension to close the picker. Swift 2

extension UIToolbar {

 func ToolbarPiker(mySelect : Selector) -> UIToolbar {

    let toolBar = UIToolbar()

    toolBar.barStyle = UIBarStyle.Default
    toolBar.translucent = true
    toolBar.tintColor = UIColor.blackColor()
    toolBar.sizeToFit()

    let doneButton = UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.Plain, target: self, action: mySelect)
    let spaceButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil)

    toolBar.setItems([ spaceButton, doneButton], animated: false)
    toolBar.userInteractionEnabled = true

    return toolBar
}

}

Swift 3 - 4

extension UIToolbar {

func ToolbarPiker(mySelect : Selector) -> UIToolbar {

    let toolBar = UIToolbar()

    toolBar.barStyle = UIBarStyle.default
    toolBar.isTranslucent = true
    toolBar.tintColor = UIColor.black
    toolBar.sizeToFit()

    let doneButton = UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.plain, target: self, action: mySelect)
    let spaceButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: nil, action: nil)

    toolBar.setItems([ spaceButton, doneButton], animated: false)
    toolBar.isUserInteractionEnabled = true

    return toolBar
}

}

And you can use it simply in your viewController:

  override func viewDidLoad() {
    super.viewDidLoad()

 //SWIFT2
 /*
let toolBar = UIToolbar().ToolbarPiker(#selector(MyViewController.dismissPicker))

 */
// Swift3 - 4
    let toolBar = UIToolbar().ToolbarPiker(mySelect: #selector(MyViewController.dismissPicker))

    myTextField.inputAccessoryView = toolBar


}

 // Swift 2 - 3
 func dismissPicker() { 

    view.endEditing(true)

}

 // Swift 4
 @objc func dismissPicker() { 

    view.endEditing(true)

}

Answer 2

You can use a generic UIView for the inputView property of the UITextField. We can add the UIDatePicker and UIButton to this UIView.

@IBAction func dateTextInputPressed(sender: UITextField) {

    //Create the view
    let inputView = UIView(frame: CGRectMake(0, 0, self.view.frame.width, 240))


    var datePickerView  : UIDatePicker = UIDatePicker(frame: CGRectMake(0, 40, 0, 0))
    datePickerView.datePickerMode = UIDatePickerMode.Date
    inputView.addSubview(datePickerView) // add date picker to UIView

    let doneButton = UIButton(frame: CGRectMake((self.view.frame.size.width/2) - (100/2), 0, 100, 50))
    doneButton.setTitle("Done", forState: UIControlState.Normal)
    doneButton.setTitle("Done", forState: UIControlState.Highlighted)
    doneButton.setTitleColor(UIColor.blackColor(), forState: UIControlState.Normal)
    doneButton.setTitleColor(UIColor.grayColor(), forState: UIControlState.Highlighted)

    inputView.addSubview(doneButton) // add Button to UIView

    doneButton.addTarget(self, action: "doneButton:", forControlEvents: UIControlEvents.TouchUpInside) // set button click event

    sender.inputView = inputView
    datePickerView.addTarget(self, action: Selector("handleDatePicker:"), forControlEvents: UIControlEvents.ValueChanged)

    handleDatePicker(datePickerView) // Set the date on start.
}

func handleDatePicker(sender: UIDatePicker) {
    var dateFormatter = NSDateFormatter()
    dateFormatter.dateFormat = "yyyy-MM-dd"
    datePicker.text = dateFormatter.stringFromDate(sender.date)
}

func doneButton(sender:UIButton)
{
    datePicker.resignFirstResponder() // To resign the inputView on clicking done.
}