inline preferred Date Picker Style is not rendering months and weekdays correctly

user_5312361 0
Viewed 1630

iOS 13.6 introduced preferredDatePickerStyle which controls the look of the date picker...

as you can see, the image has an arrow pointing to a tick, doing color debugging does not show any label that has white color, so there is no hidden object.

what to do to add year selection, and render weekdays and months?

Code

@IBOutlet weak var startDateTextField: UITextField!

lazy var startDatePicker: UIDatePicker = {
    return UIDatePicker()
}()

override func viewDidLoad() {
    super.viewDidLoad()
    
    startDatePicker.datePickerMode = .date

    if #available(iOS 14, *) {
        startDatePicker.frame.size = .init(width: self.view.bounds.width, height: 100)
        startDatePicker.preferredDatePickerStyle = .inline
        startDatePicker.tintColor = .systemPink
        startDatePicker.backgroundColor = .white
        startDatePicker.overrideUserInterfaceStyle = .light
    }
    
    startDateTextField.inputView = startDatePicker
    
    // Do any additional setup after loading the view.
}

problem

uidatepicker swift uikit ios
2 Answers

You can create a UIView and then add the DatePicker inside the view, you must disable translatesAutoresizingMaskIntoConstraints and setup DataPicker constraints as needed.

    // Create custom container view              
       let dateView = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: 358))

   //Add DatePicker to view
       dateView.addSubview(dateOfBirthPicker)
                        
   // Adding constraints to DatePicker View                      
      dateOfBirthPicker.translatesAutoresizingMaskIntoConstraints = false
      dateOfBirthPicker.topAnchor.constraint(equalTo: dateView.topAnchor, constant: 8).isActive = true
      dateOfBirthPicker.leadingAnchor.constraint(equalTo: dateView.leadingAnchor, constant: 16).isActive = true
      dateOfBirthPicker.centerXAnchor.constraint(equalTo: dateView.centerXAnchor).isActive = true
                        
   // add toolbar to textField
      textField?.inputAccessoryView = toolbar

   // finally add the inputView
      textField?.inputView = dateView

Final result

user_131252070

Looks like the date picker just doesn't have enough space to fully display itself. Try setting its translatesAutoresizingMaskIntoConstraints to false and letting it auto-size. Failing that, just give it a bigger frame.

user_1368410
Related