Picker and DatePicker in iOS Swift - Mini App: Build & Ship

Build: Picker and DatePicker Screen

This screen lets the user pick a fruit from a list and select a date using a date picker. The selected fruit and date are shown below the pickers.

Target UI

-------------------------
| Picker and DatePicker |
-------------------------
| Fruit:                |
| [Picker wheel here]   |
|                       |
| Date:                 |
| [Date picker here]    |
|                       |
| Selected Fruit:       |
| [Shows chosen fruit]  |
| Selected Date:        |
| [Shows chosen date]   |
-------------------------

Add a UIPickerView to select a fruit from a list of at least 5 fruits.

Add a UIDatePicker to select a date.

Show the selected fruit below the picker in a UILabel.

Show the selected date below the date picker in a UILabel formatted as MM/dd/yyyy.

Update the labels immediately when the user changes the picker or date.

Starter Code

iOS Swift

import UIKit

class PickerDatePickerViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    let fruits = ["Apple", "Banana", "Cherry", "Date", "Grape"]

    // TODO: Add UIPickerView, UIDatePicker, and UILabels as properties

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        // TODO: Initialize and add UIPickerView
        // TODO: Initialize and add UIDatePicker
        // TODO: Initialize and add UILabels for selected fruit and date

        // TODO: Set delegates and targets
    }

    // TODO: Implement UIPickerViewDataSource methods

    // TODO: Implement UIPickerViewDelegate methods

    // TODO: Add method to handle date picker value change
}

Task 1

Task 2

Task 3

Task 4

Task 5

Task 6

Task 7

Solution

iOS Swift

import UIKit

class PickerDatePickerViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    let fruits = ["Apple", "Banana", "Cherry", "Date", "Grape"]

    let pickerView = UIPickerView()
    let datePicker = UIDatePicker()
    let selectedFruitLabel = UILabel()
    let selectedDateLabel = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        // Setup pickerView
        pickerView.delegate = self
        pickerView.dataSource = self
        pickerView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(pickerView)

        // Setup datePicker
        datePicker.datePickerMode = .date
        datePicker.preferredDatePickerStyle = .wheels
        datePicker.translatesAutoresizingMaskIntoConstraints = false
        datePicker.addTarget(self, action: #selector(dateChanged), for: .valueChanged)
        view.addSubview(datePicker)

        // Setup selectedFruitLabel
        selectedFruitLabel.text = "Selected Fruit: Apple"
        selectedFruitLabel.textAlignment = .center
        selectedFruitLabel.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(selectedFruitLabel)

        // Setup selectedDateLabel
        selectedDateLabel.textAlignment = .center
        selectedDateLabel.translatesAutoresizingMaskIntoConstraints = false
        updateDateLabel(date: datePicker.date)
        view.addSubview(selectedDateLabel)

        // Layout constraints
        NSLayoutConstraint.activate([
            pickerView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
            pickerView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            pickerView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            pickerView.heightAnchor.constraint(equalToConstant: 150),

            datePicker.topAnchor.constraint(equalTo: pickerView.bottomAnchor, constant: 20),
            datePicker.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            datePicker.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            datePicker.heightAnchor.constraint(equalToConstant: 150),

            selectedFruitLabel.topAnchor.constraint(equalTo: datePicker.bottomAnchor, constant: 20),
            selectedFruitLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            selectedFruitLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            selectedFruitLabel.heightAnchor.constraint(equalToConstant: 30),

            selectedDateLabel.topAnchor.constraint(equalTo: selectedFruitLabel.bottomAnchor, constant: 10),
            selectedDateLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            selectedDateLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            selectedDateLabel.heightAnchor.constraint(equalToConstant: 30)
        ])
    }

    // MARK: - UIPickerViewDataSource
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return fruits.count
    }

    // MARK: - UIPickerViewDelegate
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return fruits[row]
    }

    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        selectedFruitLabel.text = "Selected Fruit: \(fruits[row])"
    }

    // MARK: - DatePicker action
    @objc func dateChanged() {
        updateDateLabel(date: datePicker.date)
    }

    func updateDateLabel(date: Date) {
        let formatter = DateFormatter()
        formatter.dateFormat = "MM/dd/yyyy"
        selectedDateLabel.text = "Selected Date: \(formatter.string(from: date))"
    }
}

We created a UIViewController subclass that implements UIPickerViewDelegate and UIPickerViewDataSource to manage the fruit picker. We added a UIPickerView and a UIDatePicker to the view, along with two UILabels to show the selected fruit and date.

The picker view shows a single column with the fruit names. When the user selects a fruit, the label updates immediately.

The date picker uses the wheel style and triggers an action when the date changes. The selected date is formatted as MM/dd/yyyy and shown in the label below.

All UI elements use Auto Layout constraints for proper positioning and responsiveness.

Final Result

Completed Screen

-------------------------
| Picker and DatePicker |
-------------------------
| Fruit:                |
| [Apple]               |
|                       |
| Date:                 |
| [06/15/2024]          |
|                       |
| Selected Fruit: Apple  |
| Selected Date: 06/15/2024 |
-------------------------

User scrolls the picker wheel to select a different fruit; the Selected Fruit label updates immediately.

User scrolls the date picker wheel to change the date; the Selected Date label updates immediately.

Stretch Goal

Add a button that resets the picker and date picker to their default values (first fruit and today's date).

💡 Hint

Add a UIButton below the labels. When tapped, set pickerView.selectRow(0, inComponent: 0, animated: true) and datePicker.date = Date(), then update labels.