CODEWITHSUNDEEP
iosswiftobjective-cuitextfielduidatepicker
Bobby S
Bobby S

Reputation: 27

Why isn't my 'UIDatePicker' displaying properly?

I am using the following syntax in a View Controller (using a Storyboard) to adapt an existing UITextField to a date format.

@IBOutlet weak var productTimeRemainingField: UITextField!

private var datePicker: UIDatePicker?

override func viewDidLoad() {
    super.viewDidLoad()
    datePicker = UIDatePicker()
    datePicker?.datePickerMode = .dateAndTime
    datePicker?.addTarget(self, action: #selector(newProductViewController.dateChanged(datePicker:)), for: .valueChanged)

let tapGesture = UITapGestureRecognizer(target: self, action: #selector(newProductViewController.viewTapped(gestureRecognizer:)))
    view.addGestureRecognizer(tapGesture)
    productTimeRemainingField.inputView = datePicker
}

@objc func viewTapped(gestureRecognizer: UITapGestureRecognizer) {
    view.endEditing(true)
}

@objc func dateChanged(datePicker: UIDatePicker) {
    let dateFormatter = DateFormatter()
    dateFormatter.dateFormat = "dd/MM/yyyy hh:mm:ss"
    productTimeRemainingField.text = dateFormatter.string(from: datePicker.date)
    view.endEditing(true)
    if #available(iOS 13.4, *) {
          datePicker.preferredDatePickerStyle = .compact
      }
}

The above code is working, and allows me to select both a time and date, however when the field is selected, the section where a user selects the time and date is shown right at the bottom of the page, making it nearly impossible to properly make a selection.

Does anyone have any idea why this is happening, and how I can fix this so it is shown in the centre of the View Controller (as with the majority of other apps - see here for my objective.

This is a screenshot as to how the date picker currently appears - here.

Upvotes: 0

Views: 85

Answers (1)

Milankumar Parmar
Milankumar Parmar

Reputation: 73

1st solution:

  1. You need to set the frame as per your need.
  2. Set preferredDatePickerStyle after initialization
override func viewDidLoad() {
        super.viewDidLoad()
        datePicker = UIDatePicker()

        //---Changes---
if #available(iOS 13.4, *) {
            datePicker.preferredDatePickerStyle = .compact
          }
        datePicker?.frame = .init(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height)
        //---

        datePicker?.datePickerMode = .dateAndTime
        datePicker?.addTarget(self, action: #selector(dateChanged(datePicker:)), for: .valueChanged)

    let tapGesture = UITapGestureRecognizer(target: self, action: #selector(viewTapped(gestureRecognizer:)))
        view.addGestureRecognizer(tapGesture)
        productTimeRemainingField.inputView = datePicker

    }

2nd solution:

  1. Set preferredDatePickerStyle after initialization
  2. use preferredDatePickerStyle as wheels and remove the frame, it will be more user friendly.

Upvotes: 1

Related Questions