How to make a timezone Picker in SwiftUI?

Question

I m new to SwiftUI. I want to make a TimeZone PickerView for my example project.

Just like this picture shown...

After a few day works, I still cannot find a way to achieve my goal, including timezone search bar. I don't know why my code is always stuck. After I choose the first option, and I cannot choose other options again. In this situation, I cannot even click the TimeZone Picker area anymore. It's just stuck without reaction...

Here is my code for now:

    struct myPicker: View {
    var timezone_area = ["TimeZ1", "TimeZ2", "TimeZ3", "TimeZ4", "TimeZ5", "TimeZ6", "TimeZ7", "TimeZ8", "TimeZ9", "TimeZ10"]
    @State var TZPickerIndex: Int = 0
    var body: some View {
        NavigationView {
            Form {
                Section {
                    Picker(selection: $TZPickerIndex, label: Text("TimeZone")) {
                        ForEach(0 ..< timezone_area.count) {
                            Text(self.timezone_area[$0]).tag($0)
                        }
                    }
                }.padding()
            }
        }
    }
}

May somebody tell me that how to make it or which kinds of keyword should I use / search? Thanks for help.

Welcome in the mess called Timezones. You could orientate based on his: https://baseweb.design/components/timezone-picker/ If you dont want to have all the Timezones in the selector you could just use the GMT + / - 0 - 12 — KevinP, Mar 02 '20 at 07:31
@Mamaessen Thanks for sharing this. But I don't know how to use it. Is that can be used in Xcode(SwiftUI framework)? Sorry for being a newbie in iOS development... — Spencer Reid, Mar 02 '20 at 08:11
You can simply add all the Timezones from that link to your timezone_area. — KevinP, Mar 02 '20 at 10:21

score 0 · Answer 1 · answered Mar 02 '20 at 09:30

0

The stuck is because of iOS simulator bug, if you test your code on a real device it should be work fine. for working with TimeZone this can help you to find out how to work with timezones in your code Getting the City & Country list in iOS Time Zone

answered Mar 02 '20 at 09:30

Mac3n

4,189
3
16
29

1

Thanks for your information and helps. I will try my code on a real device later. Now we got the full timezone list. However, I still don't find a better way to implement the search bar. Do you know how to implement a search bar on Picker or others? I just need a search bar which can be apply to searching the timezone of city. – Spencer Reid Mar 03 '20 at 02:20

score 0 · Answer 2 · answered May 27 '20 at 07:09

First, creating our own countryList string array and get the system default timezone list also.

@State var allCitiesTZ: [String] = []
@State var tzPickerIndex: Int = 0
@State var txtSearchField: String = ""
let currentTZ = TimeZone.current //show current timezone where you at 
let TZidentifiers = TimeZone.knownTimeZoneIdentifiers //get all timezone list from system defualts

Now we're ready to make our timezone picker(form+picker) and search bar(textfield) as following picture:

Please ignore that red warning, I just paste it on my Xcode blank project. Because the codes are too long to post on the post. Thanks.

How to make a timezone Picker in SwiftUI?

2 Answers2