Date Pickers (UIDatePicker)

What is UIDatePicker?

UIDatePicker is a UI component in iOS that allows users to select dates, times, or both. It is commonly used in forms, reminders, and scheduling apps.

---

1. Adding UIDatePicker in Storyboard

1. Open Main.storyboard.
2. Drag and drop a UIDatePicker onto the ViewController.
3. Set its mode (Date, Time, or Both) in the Attributes Inspector.
4. Connect it to ViewController.swift: @IBOutlet weak var datePicker: UIDatePicker!

---

2. Creating a UIDatePicker Programmatically

import UIKit

class ViewController: UIViewController {

    let datePicker = UIDatePicker()
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Set position and size
        datePicker.frame = CGRect(x: 10, y: 100, width: 350, height: 200)
        
        // Set picker mode
        datePicker.datePickerMode = .dateAndTime
        
        // Add target to detect changes
        datePicker.addTarget(self, action: #selector(dateChanged), for: .valueChanged)

        // Add to view
        view.addSubview(datePicker)
    }

    @objc func dateChanged() {
        print("Selected Date: \(datePicker.date)")
    }
}

✅ Explanation:

• Creates a UIDatePicker programmatically.
• Adds a listener to detect date changes.
• Prints the selected date.

---

3. UIDatePicker Modes

datePicker.datePickerMode = .date        // Select only Date
datePicker.datePickerMode = .time        // Select only Time
datePicker.datePickerMode = .dateAndTime // Select both Date and Time
datePicker.datePickerMode = .countDownTimer // Countdown timer

✅ Explanation:

• Use different modes based on the requirement.

---

4. Setting a Default Date

datePicker.date = Calendar.current.date(byAdding: .day, value: 3, to: Date())!

✅ Explanation:

• Sets the default date 3 days from today.

---

5. Restricting Date Selection (Min & Max)

datePicker.minimumDate = Date() // Prevents past dates
datePicker.maximumDate = Calendar.current.date(byAdding: .year, value: 1, to: Date()) // Up to 1 year ahead

✅ Explanation:

• Prevents users from selecting past dates or too far in the future.

---

6. Formatting and Displaying Selected Date

@objc func dateChanged() {
    let formatter = DateFormatter()
    formatter.dateFormat = "MMM d, yyyy - h:mm a" // Example: Feb 4, 2025 - 3:30 PM
    let formattedDate = formatter.string(from: datePicker.date)
    print("Selected Date: \(formattedDate)")
}

✅ Explanation:

• Converts the selected date into a readable format.

---

7. Using UIDatePicker Inside a UIAlertController

func showDatePickerAlert() {
    let alert = UIAlertController(title: "Select Date", message: nil, preferredStyle: .alert)
    
    let datePicker = UIDatePicker()
    datePicker.datePickerMode = .date

    alert.view.addSubview(datePicker)
    
    let selectAction = UIAlertAction(title: "OK", style: .default) { _ in
        print("Selected Date: \(datePicker.date)")
    }
    
    alert.addAction(selectAction)
    alert.addAction(UIAlertAction(title: "Cancel", style: .cancel, handler: nil))
    
    present(alert, animated: true, completion: nil)
}

✅ Explanation:

• Displays a date picker inside an alert for a compact UI.

---

8. UIDatePicker with a Text Field (Input View)

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var dateTextField: UITextField!
    let datePicker = UIDatePicker()

    override func viewDidLoad() {
        super.viewDidLoad()
        createDatePicker()
    }

    func createDatePicker() {
        datePicker.datePickerMode = .date
        
        // Add toolbar with Done button
        let toolbar = UIToolbar()
        toolbar.sizeToFit()
        
        let doneButton = UIBarButtonItem(title: "Done", style: .done, target: self, action: #selector(donePressed))
        toolbar.setItems([doneButton], animated: true)
        
        dateTextField.inputAccessoryView = toolbar
        dateTextField.inputView = datePicker
    }

    @objc func donePressed() {
        let formatter = DateFormatter()
        formatter.dateFormat = "MMM d, yyyy"
        dateTextField.text = formatter.string(from: datePicker.date)
        view.endEditing(true) // Close keyboard
    }
}

✅ Explanation:

• Displays a UIDatePicker inside a text field.
• Adds a toolbar with a Done button to close the picker.

---

9. Changing UIDatePicker Style (iOS 14+)

if #available(iOS 14, *) {
    datePicker.preferredDatePickerStyle = .inline // Inline Calendar Style
}

✅ Explanation:

• iOS 14+ introduced compact and inline styles.

---

10. Summary of UIDatePicker Features

Feature	Code Example
Set Mode	datePicker.datePickerMode = .dateAndTime
Default Date	datePicker.date = Date()
Restrict Date Range	datePicker.minimumDate = Date()
Get Selected Date	datePicker.date
Format Date	DateFormatter().dateFormat = "MMM d, yyyy"
UIDatePicker in TextField	textField.inputView = datePicker
Inline Style (iOS 14+)	datePicker.preferredDatePickerStyle = .inline

---

Conclusion

UIDatePicker is a simple and powerful tool for date selection in iOS apps. It supports different modes, restrictions, and formatting options.

Would you like a custom implementation for your app’s date selection feature? 🚀