# Day of the Week Picker in SwiftUI

A day of the week picker is a simple UI element that allows the user to select a day of the week from a list of options. This is a common UI element in many apps, especially those related to scheduling or time management. In today’s post, we are going to look at how to implement a single day-of-week picker and a more custom, multiple-day version of it.

The code in this post is available [here](https://github.com/xavier7t/iOSDevX/tree/main/iOSDevX/202304-Apr%202023/Day%20of%20the%20Week%20Picker).

# Single Day-of-Week Picker using Picker

To implement a day of the week picker in SwiftUI, we first need to create an array of the days of the week. We can do this using an enum, like this:

```swift
enum Day: String, CaseIterable {
    case Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday
}
```

Here, we've defined an enum called `Day` that has seven cases, one for each day of the week. We've also used the `CaseIterable` protocol to make it easy to iterate over all the cases of the enum.  
Next, we can create a `Picker` view that displays the days of the week. Here's an example of how to do this:

```swift
struct DayPicker: View {
    @State private var selectedDay = Day.Monday

    var body: some View {
        Picker("Day", selection: $selectedDay) {
            ForEach(Day.allCases, id: \.self) {
                Text($0.rawValue).tag($0)
            }
        }
    }
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682478598852/1713e022-710e-429e-8058-a3a486426ef5.png align="center")

Here, we've defined a `DayPicker` view that contains a `Picker`. We've also defined a `@State` variable called `selectedDay` that will hold the user's selected day of the week.

The `Picker` itself is created using the `Picker` initializer. We pass in a string that will be used as the label for the `Picker`, and a binding to the `selectedDay` variable. This will update the variable whenever the user selects a new day of the week.

We then use a `ForEach` loop to create a `Text` view for each day of the week. We use the `id` parameter to ensure that each item in the loop has a unique identifier. We also use the `tag` method to set the tag of each `Text` view to the corresponding `Day` enum value.

Finally, we can use the `DayPicker` view in our app wherever we need a day of the week picker. For example, we could use it in a form to allow the user to schedule a recurring event on a specific day of the week.

# Custom Days-of-Week Picker supporting multiple choices

To create a custom days of week picker, we need a `@State` property of type array of `Day` to hold the options picked. And inside the `body` property, let’s create an `HStack` to display all the options.

```swift
struct DaysPicker: some View {
    @State private var selectedDays: [Day] = []
    var body: some View {
        HStack {
            // more code will go here.
        }
    }
}
```

Inside the `HStack`, we need a `ForEach` to show all the options, for better user experience, we can use the first letter of the raw value of the `Day` options.

```swift
struct DaysPicker: some View {
    @State private var selectedDays: [Day] = []
    var body: some View {
        HStack {
            ForEach(Day.allCases, id: \.self) { day in
                Text(String(day.rawValue.first!))
            }
        }
    }
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682479099799/2e97049a-b947-4f36-b091-06ec569ea69a.png align="center")

Now we can style the text and remember to make the view modifiers conditional to indicate if a day is selected or not.

```swift
struct DaysPicker: View {
    @State private var selectedDays: [Day] = []
    var body: some View {
        HStack {
            ForEach(Day.allCases, id: \.self) { day in
                Text(String(day.rawValue.first!))
                    .bold()
                    .foregroundColor(.white)
                    .frame(width: 30, height: 30)
                    .background(selectedDays.contains(day) ? Color.cyan.cornerRadius(10) : Color.gray.cornerRadius(10))
            }
        }
    }
}
```

In the example above, we added the `bold` modifier and a white foreground color and a frame for each text view. Then we used a ternary operator to check if the array `selectedDays` contains the specific item in the `ForEach` - if true, the background color is cyan and if false, the background color will be gray.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682479312171/b0e5fd54-adbf-4e1d-868d-6c97f286d982.png align="center")

Finally, we can add an `onTapGesture` to update the state array `selectedDays` .

```swift
struct DaysPicker: View {
    @State private var selectedDays: [Day] = []
    var body: some View {
        HStack {
            ForEach(Day.allCases, id: \.self) { day in
                Text(String(day.rawValue.first!))
                    .bold()
                    .foregroundColor(.white)
                    .frame(width: 30, height: 30)
                    .background(selectedDays.contains(day) ? Color.cyan.cornerRadius(10) : Color.gray.cornerRadius(10))
                    .onTapGesture {
                        if selectedDays.contains(day) {
                            selectedDays.removeAll(where: {$0 == day})
                        } else {
                            selectedDays.append(day)
                        }
                    }
            }
        }
    }
}
```

In the example above, we added an `onTapGesture` modifier, in which we are checking if the day being processed by `ForEach` is there in the array, if yes, the code will remove it from the array, otherwise, the day will be added to the array.

Now you should be able to see the selected days having a cyan background.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682479461274/652b8af2-c2b6-48fb-99d8-c6f0f6bf9dba.png align="center")

In conclusion, SwiftUI makes it easy to implement a day of the week picker. By using an enum and the `Picker` view or `HStack`, we can create a simple and intuitive UI element that allows the user to select a day of the week with ease.

And that’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!