Picker and DatePicker in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this SwiftUI Picker code?

Consider this SwiftUI code snippet for a Picker. What will the user see and how will the Picker behave?

iOS Swift

struct ContentView: View {
  @State private var selectedColor = "Red"
  let colors = ["Red", "Green", "Blue"]

  var body: some View {
    Picker("Select a color", selection: $selectedColor) {
      ForEach(colors, id: \.self) { color in
        Text(color).tag(color)
      }
    }
    .pickerStyle(.wheel)
  }
}

A A segmented control with three buttons labeled Red, Green, and Blue. The user taps to select a color.

B A list of colors displayed vertically. The user taps a color to select it.

C A text field where the user types the color name manually.

D A wheel-style picker showing Red, Green, and Blue. The user can spin the wheel to select a color. The selected color updates the state variable.

💡 Hint

Look at the .pickerStyle modifier to understand the Picker's appearance.

The .wheel picker style creates a spinning wheel UI. The ForEach creates options from the colors array. The selection binding updates the selectedColor state.

❓ ui_behavior

intermediate

What happens when you change the DatePicker's displayedComponents?

Given this SwiftUI DatePicker code, what will the user see if displayedComponents is set to [.date] only?

iOS Swift

struct ContentView: View {
  @State private var selectedDate = Date()

  var body: some View {
    DatePicker("Select date and time", selection: $selectedDate, displayedComponents: [.date])
      .datePickerStyle(.compact)
  }
}

A The user sees a compact date picker that lets them pick only the date, not the time.

B The user sees a time-only picker without date selection.

C The user sees a picker that lets them select both date and time.

D The picker shows no UI because displayedComponents is invalid.

💡 Hint

Check the displayedComponents parameter to control what parts of date/time are shown.

Setting displayedComponents to [.date] restricts the picker to show only the date selection UI. Time selection is hidden.

❓ lifecycle

advanced

What is the effect of changing the @State variable bound to a Picker?

In SwiftUI, if you programmatically change the @State variable bound to a Picker's selection, what happens to the Picker's UI?

iOS Swift

struct ContentView: View {
  @State private var selectedFruit = "Apple"
  let fruits = ["Apple", "Banana", "Cherry"]

  var body: some View {
    VStack {
      Picker("Select fruit", selection: $selectedFruit) {
        ForEach(fruits, id: \.self) { fruit in
          Text(fruit).tag(fruit)
        }
      }
      Text("You selected: \(selectedFruit)")
      Button("Select Banana") {
        selectedFruit = "Banana"
      }
    }
  }
}

A The app crashes because the state variable is changed programmatically.

B The Picker UI does not change until the user interacts with it.

C The Picker UI updates immediately to show Banana as selected.

D The Picker resets to the first item in the list.

💡 Hint

Think about how SwiftUI updates views when state changes.

Changing the @State variable triggers SwiftUI to re-render the Picker with the new selection reflected immediately.

📝 Syntax

advanced

What error does this DatePicker code produce?

Examine this SwiftUI DatePicker code. What error will it cause?

iOS Swift

struct ContentView: View {
  @State private var date = Date()

  var body: some View {
    DatePicker("Pick a date", selection: $date, displayedComponents: .date)
  }
}

A No error, code compiles and runs correctly.

B Type error: Cannot convert value of type 'DatePickerComponents' to expected argument type 'Set<DatePickerComponents>'

C Syntax error: Missing parentheses around .date

D Runtime error: DatePicker crashes when displayedComponents is not a set.

💡 Hint

Look carefully at the type expected for displayedComponents parameter.

The displayedComponents parameter expects a Set of DatePickerComponents, but .date alone is a single value, not a Set.

🧠 Conceptual

expert

Why use a Picker over a DatePicker for selecting options?

In iOS SwiftUI, when should you prefer using a Picker instead of a DatePicker?

A Use Picker when selecting from a fixed list of options like colors or fruits; use DatePicker only for dates and times.

B Use Picker only for dates; DatePicker is for general lists.

C Use DatePicker when you want a wheel UI for any selection, Picker for buttons only.

D Picker and DatePicker are interchangeable and can be used for any selection.

💡 Hint

Think about the purpose of each control and the type of data they handle.

Picker is designed for choosing from a list of discrete options. DatePicker is specialized for selecting dates and times.

Practice

1. What is the primary purpose of a Picker in SwiftUI?

easy

A. To input text from the keyboard

B. To display a calendar view for date selection

C. To let users select a value from a list of options

D. To show an alert message

Solution

1. Step 1: Understand Picker functionality

   A Picker is designed to let users choose from multiple options easily.

2. Step 2: Compare with other UI elements

   DatePicker is for dates, TextField is for text input, Alert is for messages.

3. Final Answer:

   To let users select a value from a list of options -> Option C

4. Quick Check:

   Picker = select from list [OK]

Hint: Picker = choose from list, DatePicker = choose date [OK]

Common Mistakes:

• Confusing Picker with DatePicker
• Thinking Picker inputs text
• Assuming Picker shows alerts

2. Which of the following is the correct syntax to create a simple Picker in SwiftUI?

easy

A. Picker { Text("One") } selection: $choice label: Text("Select")

B. Picker(selection: $choice) { Text("One") } label: { Text("Select") }

C. Picker(label: Text("Select"), selection: $choice) { Text("One") }

D. Picker(selection: choice) { Text("One") } label: Text("Select")

Solution

1. Step 1: Recall Picker initializer syntax

   The correct syntax uses named parameters: selection binding first, then content closure, then label closure.

2. Step 2: Check each option

   Picker(selection: $choice) { Text("One") } label: { Text("Select") } matches the correct syntax with $choice binding and label closure.

3. Final Answer:

   Picker(selection: $choice) { Text("One") } label: { Text("Select") } -> Option B

4. Quick Check:

   Picker syntax = selection: $var, content, label [OK]

Hint: Picker needs selection binding with $ and label closure [OK]

Common Mistakes:

• Omitting $ for binding
• Wrong parameter order
• Using non-closure label

3. Given this SwiftUI code snippet, what will be displayed when the user selects "Banana"?

struct ContentView: View {
  @State private var fruit = "Apple"
  var fruits = ["Apple", "Banana", "Cherry"]

  var body: some View {
    VStack {
      Picker("Select Fruit", selection: $fruit) {
        ForEach(fruits, id: \.self) { fruit in
          Text(fruit)
        }
      }
      Text("You chose: \(fruit)")
    }
  }
}

medium

A. You chose: Banana

B. You chose: "" (empty string)

C. You chose: Cherry

D. You chose: Apple

Solution

1. Step 1: Understand state binding in Picker

   The Picker binds to @State variable 'fruit', updating it when user selects an option.

2. Step 2: User selects "Banana"

   The state variable 'fruit' changes to "Banana", so the Text below shows "You chose: Banana".

3. Final Answer:

   You chose: Banana -> Option A

4. Quick Check:

   Picker selection updates state = displayed text [OK]

Hint: Picker updates bound state, Text shows updated value [OK]

Common Mistakes:

• Ignoring state update on selection
• Confusing initial value with selected value
• Not using id: \.self in ForEach

4. Identify the error in this DatePicker code snippet:

@State private var selectedDate = Date()

var body: some View {
  DatePicker("Pick a date", selection: selectedDate, displayedComponents: .date)
}

medium

A. DatePicker cannot display only date component

B. selectedDate must be a String, not Date

C. Label parameter must be omitted

D. Missing $ before selectedDate in selection binding

Solution

1. Step 1: Check binding syntax for DatePicker

   The selection parameter requires a binding, so it must be $selectedDate, not selectedDate.

2. Step 2: Verify other parameters

   Displaying only date is valid, label is required, and selectedDate is correctly a Date type.

3. Final Answer:

   Missing $ before selectedDate in selection binding -> Option D

4. Quick Check:

   Binding needs $ prefix [OK]

Hint: Always use $ for binding state variables [OK]

Common Mistakes:

• Forgetting $ in binding
• Using wrong data type for selection
• Misunderstanding displayedComponents usage

5. You want to create a SwiftUI view where users pick a time and a fruit from a list. Which code snippet correctly combines a DatePicker for time and a Picker for fruits with state variables?

hard

A. struct ContentView: View {
@State private var time = Date()
@State private var fruit = "Apple"
let fruits = ["Apple", "Banana"]

var body: some View {
VStack {
DatePicker(selection: $time, displayedComponents: .hourAndMinute) { Text("Select Time") }
Picker(selection: $fruit) {
ForEach(fruits, id: \.self) { Text($0) }
} label: { Text("Select Fruit") }
}
}
}

B. struct ContentView: View {
@State private var time = Date()
@State private var fruit = "Apple"
let fruits = ["Apple", "Banana"]

var body: some View {
VStack {
DatePicker("Select Time", selection: time, displayedComponents: .hourAndMinute)
Picker("Select Fruit", selection: fruit) {
ForEach(fruits, id: \.self) { Text($0) }
}
}
}
}

C. struct ContentView: View {
@State private var time = Date()
@State private var fruit = "Apple"
let fruits = ["Apple", "Banana"]

var body: some View {
VStack {
DatePicker("Select Time", selection: time, displayedComponents: .hourAndMinute)
Picker("Select Fruit", selection: $fruit) {
ForEach(fruits, id: \.self) { Text($0) }
}
}
}
}

D. struct ContentView: View {
@State private var time = Date()
@State private var fruit = "Apple"
let fruits = ["Apple", "Banana"]

var body: some View {
VStack {
DatePicker("Select Time", selection: $time)
Picker("Select Fruit", selection: $fruit) {
ForEach(fruits, id: \.self) { Text($0) }
}
}
}
}

Solution

1. Step 1: Check DatePicker syntax with label closure

   struct ContentView: View { @State private var time = Date() @State private var fruit = "Apple" let fruits = ["Apple", "Banana"] var body: some View { VStack { DatePicker(selection: $time, displayedComponents: .hourAndMinute) { Text("Select Time") } Picker(selection: $fruit) { ForEach(fruits, id: \.self) { Text($0) } } label: { Text("Select Fruit") } } } } uses DatePicker with selection binding and label closure, which is valid syntax.

2. Step 2: Check Picker syntax with label closure

   Picker in struct ContentView: View { @State private var time = Date() @State private var fruit = "Apple" let fruits = ["Apple", "Banana"] var body: some View { VStack { DatePicker(selection: $time, displayedComponents: .hourAndMinute) { Text("Select Time") } Picker(selection: $fruit) { ForEach(fruits, id: \.self) { Text($0) } } label: { Text("Select Fruit") } } } } uses selection binding and label closure correctly, with ForEach and id: \.self.

3. Step 3: Verify other options

   struct ContentView: View { @State private var time = Date() @State private var fruit = "Apple" let fruits = ["Apple", "Banana"] var body: some View { VStack { DatePicker("Select Time", selection: time, displayedComponents: .hourAndMinute) Picker("Select Fruit", selection: $fruit) { ForEach(fruits, id: \.self) { Text($0) } } } } } lacks $ for DatePicker selection binding, struct ContentView: View { @State private var time = Date() @State private var fruit = "Apple" let fruits = ["Apple", "Banana"] var body: some View { VStack { DatePicker("Select Time", selection: time, displayedComponents: .hourAndMinute) Picker("Select Fruit", selection: fruit) { ForEach(fruits, id: \.self) { Text($0) } } } } } lacks $ for bindings, struct ContentView: View { @State private var time = Date() @State private var fruit = "Apple" let fruits = ["Apple", "Banana"] var body: some View { VStack { DatePicker("Select Time", selection: $time) Picker("Select Fruit", selection: $fruit) { ForEach(fruits, id: \.self) { Text($0) } } } } } misses displayedComponents for time.

4. Final Answer:

   The code using selection-first initializers with label closures -> Option A

5. Quick Check:

   Use bindings with $ and label closures for both controls [OK]

Hint: Use $ for bindings and label closures for Picker and DatePicker [OK]

Common Mistakes:

• Omitting $ in bindings
• Missing label closures
• Not specifying displayedComponents for time