Picker and DatePicker in iOS Swift

Introduction

Pickers let users choose from a list or select a date easily. They make input simple and clear.

When you want the user to select one option from a list, like choosing a color or a fruit.

When you want the user to pick a date or time, like setting a birthday or an appointment.

When you want to save space on screen but still let users pick from many choices.

When you want to avoid typing errors by letting users pick from fixed options.

Syntax

iOS Swift

struct ContentView: View {
  @State private var selection = 0
  var body: some View {
    Picker("Choose an option", selection: $selection) {
      Text("Option 1").tag(0)
      Text("Option 2").tag(1)
    }
  }
}

// For DatePicker:
@State private var date = Date()
DatePicker("Select a date", selection: $date, displayedComponents: .date)

Use @State to keep track of the selected value.

Picker needs a label and a binding to the selected value.

Examples

A picker with string tags for fruit choices.

iOS Swift

Picker("Fruits", selection: $selectedFruit) {
  Text("Apple").tag("apple")
  Text("Banana").tag("banana")
  Text("Cherry").tag("cherry")
}

A date picker that only shows the date, not time.

iOS Swift

DatePicker("Birthday", selection: $birthday, displayedComponents: .date)

A date picker that only shows time selection.

iOS Swift

DatePicker("Meeting Time", selection: $meetingTime, displayedComponents: [.hourAndMinute])

Sample App

This app shows a wheel picker for fruits and a compact date picker for birthday. The selected fruit and date appear below each picker.

iOS Swift

import SwiftUI

struct ContentView: View {
  @State private var selectedFruit = "apple"
  @State private var birthday = Date()

  var body: some View {
    VStack(spacing: 20) {
      Picker("Select a fruit", selection: $selectedFruit) {
        Text("Apple").tag("apple")
        Text("Banana").tag("banana")
        Text("Cherry").tag("cherry")
      }
      .pickerStyle(.wheel)

      Text("You selected: \(selectedFruit.capitalized)")

      DatePicker("Select your birthday", selection: $birthday, displayedComponents: .date)
        .datePickerStyle(.compact)

      Text("Birthday: \(birthday.formatted(date: .abbreviated, time: .omitted))")
    }
    .padding()
  }
}

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
    }
  }
}

Important Notes

Use .pickerStyle() to change how the picker looks (wheel, menu, segmented).

DatePicker can show date, time, or both using displayedComponents.

Always bind pickers to a state variable to track user choice.

Summary

Pickers let users choose from a list of options easily.

DatePickers let users select dates or times with a friendly interface.

Use state variables to keep track of what the user picks.

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