Done/Cancel Button is not showing Issue In Toolbar(Simulator tested)

Question

I added a toolbar with done and cancel button but the buttons are not appearing on the toolbar. I could not find the cause of this issue. i tried many changes but the issue is not resolved.

This is the code regarding the toolbar:

   @IBOutlet weak var textFieldYear: UITextField!
   @IBOutlet weak var viewMonth: UIView!
   @IBOutlet weak var textFieldMonth: UITextField!
   @IBOutlet weak var viewDatePicker: UIView!
   @IBOutlet weak var datePicker: UIPickerView!

   func setUpDatePickerView(){
    let date = Date()
    arrYear.add(date.year)
    if date.month == "November" || date.month == "December" {
        let newDate = Calendar.current.date(byAdding: .year, value: 1, to: date)
        arrYear.add(newDate?.year ?? "")
    }
    let toolBar = UIToolbar().ToolbarPiker(mySelect: #selector(self.donePicker), cancel: #selector(self.dismissPicker))
    
   
    viewDatePicker.addSubview(toolBar)
    datePicker.reloadAllComponents()
    datePicker.selectRow(0, inComponent: 0, animated: true)
    textFieldYear.text = (arrYear[0] as! String)
    textFieldMonth.text = Calendar.current.date(byAdding: .month, value: 1, to: Date())?.month
    
}

// ToolBar

extension UIToolbar {

  func ToolbarPiker(mySelect : Selector, cancel : Selector) -> UIToolbar {

    let toolBar = UIToolbar()
    toolBar.barStyle = UIBarStyle.default
    toolBar.isTranslucent = true
    toolBar.tintColor = UIColor.black
    toolBar.sizeToFit()
   
    let doneButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.done, target: self, action: mySelect)
   
     
    let spaceButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.fixedSpace, target: nil, action: nil)
    spaceButton.width = 225
    let cancelButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.cancel, target: self, action: cancel)
    
    toolBar.setItems([cancelButton, spaceButton, doneButton], animated: false)
    toolBar.isUserInteractionEnabled = true
   
    return toolBar
 }  
}

   @objc func donePicker() {
    self.view.endEditing(true)
 }

   @objc func dismissPicker() {
     self.view.endEditing(true)
     viewDatePicker.isHidden = true
 }

@ElTomato mySelect is type of Selector which point to the donePicker func — Sk Sk, Dec 17 '20 at 12:49
Nobody can probably tell since you don't show all relevant lines of code. My wild guess is that you are not setting up your toobar when the view controller is loaded. — El Tomato, Dec 17 '20 at 13:07
I don't even know under what class you are writing code. I certainly don't know where your view controller or whatever is reading setUpDatePickerView. — El Tomato, Dec 17 '20 at 13:18

score 0 · Answer 1 · answered Dec 17 '20 at 13:15

0

I think, you might be missing to add the toolbar as an accessory view to the input element. For example here we will add a toolbar as an accessory view to a textField.

textField1.inputAccessoryView = toolBar

Please let me know if it worked

answered Dec 17 '20 at 13:15

Carlos Maria Caraccia

470
4
22

to understand you want to add the toolbar to your viewDatePicker ? – Carlos Maria Caraccia Dec 17 '20 at 13:55
Yes friend. I want to add a toolbar on top of the picker – Sk Sk Dec 17 '20 at 13:57
I really believe you're missing in viewDatePicker.inputAccessoryView = UIToolBar().ToolBarPicker(bla bna bla) – Carlos Maria Caraccia Dec 17 '20 at 14:12

Leo Dabus · Answer 2 · 2020-12-18T01:46:35.713

I would subclass UITextField and add your pickerview and toolbar there:

import UIKit

class MonthField: UITextField, UIPickerViewDelegate, UIPickerViewDataSource {

    let pickerView = UIPickerView()
    var dataSource: [String] { return Calendar.current.monthSymbols }
    var month: Int = 0

    func numberOfComponents(in pickerView: UIPickerView) -> Int { return 1 }
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int { return dataSource.count }
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? { return dataSource[row] }
    // Configure toolbar and picker view
    override func didMoveToWindow() {
        let toolbar = UIToolbar()
        toolbar.setItems([
            .init(title: "Cancel", style: .plain, target: self, action:  #selector(cancel)),
            .flexibleSpace,
            .init(title: "Done", style: .plain, target: self, action:  #selector(done)),
        ], animated: false)
        pickerView.delegate = self
        pickerView.dataSource = self
        pickerView.selectRow(Date().month-1, inComponent: 0, animated: false)
        inputView = pickerView
        inputAccessoryView = toolbar
        toolbar.sizeToFit()
        placeholder = "Select Month"
    }

    override func caretRect(for position: UITextPosition) -> CGRect { return .zero }

    @objc func done(_ barButtonItem: UIBarButtonItem) {
        month = pickerView.selectedRow(inComponent: 0) + 1
        text = dataSource[month-1]
        endEditing(false)
    }
    @objc func cancel(_ barButtonItem: UIBarButtonItem) {
        endEditing(false)
    }
}

extension UIBarButtonItem {
    static let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
}

extension Date {    
    var month: Int { return Calendar.current.component(.month, from: self) }
}

Done/Cancel Button is not showing Issue In Toolbar(Simulator tested)

2 Answers2