How to set time picker at top of inline style Date picker in iOS 14?

Viewed 2458

I have set inline style date for iOS 14. In this date picker timer picker is display at bottom. I want to display that time picker at top of inline style date picker like display in iOS default calendar app.

My app screen shot: enter image description here

iOS default calendar app screen shot: enter image description here

2 Answers

UIKit does not officially support Time Picker above the Date Picker inside an in-line UIDatePicker.

However, you can just create 2 Date Pickers, one for the date and one for the time, and then arrange them however you want.

This code that I made might help you:

let time = timePicker.date
var date = datePicker.date
date = Calendar.current.startOfDay(for: date)

let calendar = Calendar.current

var timeInterval: TimeInterval = 0
timeInterval += Double(calendar.component(.second, from: time))
timeInterval += Double(calendar.component(.minute, from: time)) * 60
timeInterval += Double(calendar.component(.hour, from: time)) * 3600

date.addTimeInterval(timeInterval)

Then use the variable date , and everything should work like in a regular date-and-time Date Picker.

//Date Time Picker
extension UIViewController {
    
    func setUpDatePicker(dateFormat: String, startDate : Date,timePicker : Bool, completion: @escaping (_ selectedDate: String)->()) {
        
        let datePicker = UIDatePicker()
        datePicker.minimumDate = startDate
        
        if timePicker == true {
            
            datePicker.datePickerMode = .time
        }
        
        if #available(iOS 14, *) {
            datePicker.preferredDatePickerStyle = .wheels
            datePicker.sizeToFit()
        }

        let dateChooserAlert = UIAlertController(title: "Choose Date", message: nil, preferredStyle: .actionSheet)
        datePicker.frame = CGRect(x: 0, y: 50, width: self.view.bounds.width, height: 200)
        dateChooserAlert.view.addSubview(datePicker)
        dateChooserAlert.addAction(UIAlertAction(title: "Done", style: .cancel, handler: { action in
            
            // Your actions here if "Done" clicked...
            let dateformat = DateFormatter()
            if timePicker == true {
                
                dateformat.timeStyle = .medium
                completion(dateformat.string(from: datePicker.date))
            }
            else{
                
                dateformat.dateFormat = dateFormat
                completion(dateformat.string(from: datePicker.date))
            }
            
        }))
        let height: NSLayoutConstraint = NSLayoutConstraint(item: dateChooserAlert.view as Any, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.1, constant: 300)
        dateChooserAlert.view.addConstraint(height)
        self.present(dateChooserAlert, animated: true, completion: nil)
    }
}

//Use

self.setUpDatePicker(dateFormat: "MM/dd/yyyy", startDate: Date(), timePicker: false, completion: { (selectedDate) in
            

                  print(selectedDate)
})
Related