UIDatePicker not fully popping up on UITextField click - ios

Question

The app I'm coding is an event-based app. On the screen where you would create a new event I have a UITextField with a UIDatePicker set as its input view initialized as:
lazy var eventDateTxt: UITextField = {
let tf = UITextField()
tf.attributedPlaceholder = NSAttributedString(string: "Pick Your Event Date",
attributes: [NSAttributedString.Key.foregroundColor: UIColor.zipVeryLightGray])
tf.font = .zipBody
tf.borderStyle = .roundedRect
tf.tintColor = .white
tf.backgroundColor = .zipGray
tf.textColor = .white
tf.adjustsFontSizeToFitWidth = true
tf.minimumFontSize = 10.0;
let datePicker = UIDatePicker()
datePicker.datePickerMode = .dateAndTime
datePicker.minimumDate = Date()
tf.inputView = datePicker
datePicker.addTarget(self, action: #selector(dateChanged), for: .valueChanged)
return tf
}()
dateChanged looks like this
#objc func dateChanged(sender: UIDatePicker){
let dateFormat = DateFormatter()
dateFormat.dateStyle = .long
dateFormat.timeStyle = .short
eventDateTxt.text = dateFormat.string(from: sender.date)
event.startTime = sender.date
}
and although it doesn't matter, here is my code for the UITextFieldDelegate
extension NewEventViewController: UITextFieldDelegate {
func textFieldDidBeginEditing(_ textField: UITextField) {
if textField == titleText {
if textField.text == "Event Title" {
textField.text = ""
}
}
}
func textFieldDidEndEditing(_ textField: UITextField) {
if textField == titleText {
if textField.text == "" {
textField.text = "Event Title"
}
}
}
}
Now the problem: When I click the UITextField to open the DatePicker, it pops up as a small pop up view on the bottom of the screen and looks like this:
https://ibb.co/WBJ9GsN
note the very bottom of the image.
Now if you click the date at the bottom there it opens the DatePicker as expected and looks like this:
https://ibb.co/N7VvfX6
when doing so an error comes up in the consol
Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x600002d79ea0 'UIView-bottom-readableContentGuide-constraint' UILayoutGuide:0x60000379d340'UIViewLayoutMarginsGuide'.bottom == UILayoutGuide:0x60000379d260'UIViewReadableContentGuide'.bottom (active)>
Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.
2021-08-11 12:52:37.262846-0400 zip_official[93261:10730049] [DatePicker] UIDatePicker 0x7faa2732fe80 is being laid out below its minimum width of 280. This may not look like expected, especially with larger than normal font sizes.
Using the suggested breakpoint didn't lead me anywhere.
So my question: How do I make it so the DatePicker pops up immediately without the little bottom tab.

Answer 1

This date picker thing is a lot of pain in the back. It changed twice for last two iOS versions. I had the same issue earlier and what I did was:
Make the date picker stick to the bottom (with some constant to place it a little above safe area). In your case, I would give it a frame.
let datePicker = UIDatePicker(frame: CGRect(x: eventDateTxt.frame.minX, y: eventDateTxt.frame.minY, width: view.frame.width, height: 150))
Some pseudo code (for iOS 14 and higher I guess):
let datePicker = UIDatePicker()
datePicker.preferredDatePickerStyle = .wheels
If your iOS version < 14, then maybe do it with frames.

Answer 2

For better UI output
if #available(iOS 14.0, *) {
datePicker.preferredDatePickerStyle = .inline
} else if #available(iOS 13.4, *) {
datePicker.preferredDatePickerStyle = .wheels
}