Picker and DatePicker in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple Picker with three options.

iOS Swift

struct ContentView: View {
  @State private var selection = 0
  var body: some View {
    Picker("Select a number", selection: $selection) {
      Text("One").tag(0)
      Text("Two").tag(1)
      Text("Three").tag(2)
    }.pickerStyle([1]())
  }
}

Drag options to blanks, or click blank then click option'

ASegmentedPickerStyle

BWheelPickerStyle

CMenuPickerStyle

DDefaultPickerStyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using WheelPickerStyle shows a spinning wheel, not segments.

The SegmentedPickerStyle shows the picker as horizontal segments, which is a common simple style.

2fill in blank

medium

Complete the code to create a DatePicker that shows only the date, not time.

iOS Swift

struct ContentView: View {
  @State private var selectedDate = Date()
  var body: some View {
    DatePicker("Select date", selection: $selectedDate, displayedComponents: [1])
  }
}

Drag options to blanks, or click blank then click option'

A.date

B.hourAndMinute

C.dateAndTime

D.time

Attempts:

3 left

💡 Hint

Common Mistakes

Using .dateAndTime shows both date and time, which is not wanted here.

Using .date shows only the calendar date picker without time.

3fill in blank

hard

Fix the error in the Picker code by completing the missing binding.

iOS Swift

struct ContentView: View {
  @State private var selectedFruit = "Apple"
  let fruits = ["Apple", "Banana", "Cherry"]
  var body: some View {
    Picker("Select a fruit", selection: [1]) {
      ForEach(fruits, id: \.self) { fruit in
        Text(fruit).tag(fruit)
      }
    }
  }
}

Drag options to blanks, or click blank then click option'

A&selectedFruit

BselectedFruit

C$selectedFruit

DselectedFruitBinding

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the value directly without $ causes a compile error.

The Picker's selection needs a binding, so use $selectedFruit to pass the binding.

4fill in blank

hard

Fill both blanks to create a DatePicker that allows selecting only future dates starting from today.

iOS Swift

struct ContentView: View {
  @State private var date = Date()
  var body: some View {
    DatePicker("Pick a date", selection: $date, in: [1]..., displayedComponents: [2])
  }
}

Drag options to blanks, or click blank then click option'

ADate()

B.date

C.dateAndTime

DDate().addingTimeInterval(-86400)

Attempts:

3 left

💡 Hint

Common Mistakes

Using a past date or wrong displayedComponents shows unwanted options.

Using Date()... restricts selection to today and future dates. .date shows only the date picker.

5fill in blank

hard

Fill all three blanks to create a Picker that shows a wheel style and updates the selected index.

iOS Swift

struct ContentView: View {
  @State private var selectedIndex = 0
  let colors = ["Red", "Green", "Blue"]
  var body: some View {
    Picker("Choose color", selection: [1]) {
      ForEach(0..<colors.count, id: \.self) { index in
        Text(colors[index]).tag([2])
      }
    }.pickerStyle([3]())
  }
}

Drag options to blanks, or click blank then click option'

A$selectedIndex

Bindex

CWheelPickerStyle

DselectedIndex

Attempts:

3 left

💡 Hint

Common Mistakes

Using selectedIndex without $ causes errors.

Wrong tag values cause selection mismatch.

The Picker selection needs a binding $selectedIndex. The tag should be the index. The style is WheelPickerStyle for a spinning wheel.