如何将UIDatePicker的背景颜色设置为UITextField inputView？

Question

Please do not mark as duplicate. The available answers haven't answered my issue.

I am using a UIDatePicker as UITextField's inputView (inside a UITableViewCell ):

@IBOutlet weak var theTextField: UITextField!

func textFieldDidBeginEditing(_ textField: UITextField) {

        let picker = UIDatePicker()
        picker.setValue(Colors.CI2, forKeyPath: "textColor")

        picker.datePickerMode = .date

        textField.inputView = picker
        textField.inputView?.backgroundColor = Colors.CI1 // my desired color

        picker.addTarget(self, action: #selector(datePickerValueChanged), for: .valueChanged)

}

The problem: The color does only change, once the picker is called a second time.

I guess, that this issue occurs because the inputView is optional and only once the picker is called a second time, the inputView is instantiated at the moment where I want to change the color.

I have tried to subclass UITextField and observe inputView .

class DateTextField: UITextField {

    override var inputView: UIView? {

        didSet {

            self.inputView?.backgroundColor = Colors.CI1
            self.reloadInputViews()

        }

    }

}

Unfortunately without success. Same behavior. What am I missing? Help is very appreciated.

Answer 1

The mistake was that I had set the keyboard appearance in the Interface Builder. Once set back to default it worked like it was supposed to.

Answer 2

您可以使用以下库来自定义颜色https://github.com/prolificinteractive/PIDatePicker

Answer 3

create a function which holds the date picker colours, and call it in the textFieldDidBeginEditing . I think that should solve your issue.

Answer 4

So you mention that this text field is within a UITableViewCell ... What I would suggest is adding the first block of code to a UITextFieldDelegate and then in the tableView(_:willDisplay:forRowAt:) function in the UITableViewDelegate , set the delegate of the text field to your custom UITextFieldDelegate .

Without knowledge of more of your code structure I can only provide you with a very generic implementation:

@IBOutlet weak var theTextField: UITextField!

//Add your customisation to the textField...
extension ViewController : UITextFieldDelegate {
    func textFieldDidBeginEditing(_ textField: UITextField) {

            let picker = UIDatePicker()
            picker.setValue(Colors.CI2, forKeyPath: "textColor")

            picker.datePickerMode = .date

            textField.inputView = picker
            textField.inputView?.backgroundColor = Colors.CI1 // my desired color

            picker.addTarget(self, action: #selector(datePickerValueChanged), for: .valueChanged)

    }
}

extension ViewController : UITableViewDelegate {
    //Set the delegate when the UITableViewCell appears:
    func tableView(_ tableView: UITableView, 
                willDisplay cell: UITableViewCell, 
                   forRowAt indexPath: IndexPath) {
        let dateCell = = self.tableView.dequeueReusableCellWithIdentifier("cell") as! DateCell

        dateCell.delegate = self

        return dateCell
    }
}

Answer 5

Do not change inputView in textFieldDidBeginEditing() . The last time you can change the textField.inputView property is in textFieldShouldBeginEditing() .

As for the best practice: you should move all the code for the textView.inputView configuration to the place where you create the textView to do a one time configuration . For instance:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    // get the cell
    // get your instance of textField
    // ...

    // Configure everything you want about your input view
    let picker = UIDatePicker()
    picker.setValue(Colors.CI2, forKeyPath: "textColor")
    picker.datePickerMode = .date
    picker.backgroundColor = Colors.CI1
    textField.inputView = picker // <-- You just have to assign this ONCE

    // ... Continue your setup ...
    return cell
}

If you need to change the configuration of the inputView each time it has to appear on screen, do the change of textView.inputView = ... in textFieldShouldBeginEditing(){ ... } .

---

Why it did not work

In your code (when you do the change in textField DID BeginEditing ), the UIDatePicker shown was always the previously created one. It seems that the gray one was set (but not configured) when you created the textField instance.

In textFieldDidBeginEditing() , the system has already drawn the textView.inputView and it will NOT look again at the inputView property if you modify it.

Answer 6

This code is working for me

func textFieldDidBeginEditing(_ textField: UITextField) {   
        let picker = UIDatePicker()
        picker.datePickerMode = .date

        textField.inputView = picker
        textField.inputView?.backgroundColor = UIColor.blue

}

Even on the first edit it shows up blue.

Also:

Instead of creating a picker instance inside textField delegate method, you could create the picker in viewDidLoad method, set its background color, give it a tag and then access this picker using the tag in the delegate method instead of creating the variable there.