Add Done Button To PickerView Popup In Swift?

Question

I want to add the Finish button in the popup 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 successfully pop up datePickerView.

But after I selected the date, she does not have a Finish button to reject it.

So how can I add a Finish button to it?

Thanks!

Answer 1

I made this extension to close the collector. 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 UITextField . We can add 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. } 

Answer 3

if you use a button instead of a text field:

/ ** * MARK - pre-reservation action * /

 @IBAction func advanceBookingAction(sender: UIButton) { var datePicker : UIDatePicker = UIDatePicker() var datePickerContainer = UIView() datePickerContainer.frame = CGRectMake(0.0, self.view.frame.height/2, 320.0, 300.0) datePickerContainer.backgroundColor = UIColor.whiteColor() var pickerSize : CGSize = datePicker.sizeThatFits(CGSizeZero) datePicker.frame = CGRectMake(0.0, 20, pickerSize.width, 460) datePicker.setDate(NSDate(), animated: true) datePicker.maximumDate = NSDate() datePicker.datePickerMode = UIDatePickerMode.DateAndTime datePicker.addTarget(self, action: "dateChangedInDate:", forControlEvents: UIControlEvents.ValueChanged) datePickerContainer.addSubview(datePicker) var doneButton = UIButton() doneButton.setTitle("Done", forState: UIControlState.Normal) doneButton.setTitleColor(UIColor.blueColor(), forState: UIControlState.Normal) doneButton.addTarget(self, action: Selector("dismissPicker:"), forControlEvents: UIControlEvents.TouchUpInside) doneButton.frame = CGRectMake(250.0, 5.0, 70.0, 37.0) datePickerContainer.addSubview(doneButton) self.view.addSubview(datePickerContainer) }// end advanceBookingAction /** * MARK - observer to get the change in date */ func dateChangedInDate(sender:UIDatePicker){ var dateFormatter = NSDateFormatter() dateFormatter.dateStyle = NSDateFormatterStyle.LongStyle dateFormatter.timeStyle = NSDateFormatterStyle.NoStyle objMethodInc.printvj("date selected \(datePicker.date)") }// end dateChangedInDate /* * MARK - dismiss the date picker value */ func dismissPicker(sender: UIButton) { objMethodInc.printvj("dismiss date picker") datePickerContainer.removeFromSuperview() }// end dismissPicker 

Answer 4

In Swift 5

If you only need the Finish button in DatePicker, use my code

 //Write toolbar code for done button let toolBar = UIToolbar() toolBar.barStyle = .default toolBar.isTranslucent = true let space = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil) let doneButton = UIBarButtonItem(title: "Done", style: .done, target: self, action: #selector(onClickDoneButton)) toolBar.setItems([space, doneButton], animated: false) toolBar.isUserInteractionEnabled = true toolBar.sizeToFit() dobTF.inputAccessoryView = toolBar //Change your TextField name here @objc func onClickDoneButton() { self.view.endEditing(true) }