Forem: Katharina Gopp

Timezone Shenanigans in Swift

Katharina Gopp — Tue, 23 Aug 2022 10:11:00 +0000

And how they can drive you crazy

There comes a time when it is inevitable to work with Calendar. Sometimes it is easy, but be aware, it can be very tricky 😅

So let's have some fun with it 👍

Assume you have to compare two different Date values.

let date1 = Date(timeIntervalSince1970: 0) // 1970-01-01 00:00:00 
let date2 = Date(timeIntervalSince1970: 60 * 60 * 24) // 1970-01-02 00:00:00 

func compareDates(date1: Date, date2: Date){
    switch date1 {
    case date2:
        print("date1 and date2 represent the same point in time")
    case ...date2:
        print("date1 is earlier in time than date2")
    case date2...:
        print("date1 is later in time than date2")
    default:
        return
    }
}
compareDates(date1: date1, date2: date2)

As we would assume, we get as result "date1 is earlier in time than date2". Nice! 😃

So what happens, if we use the same day but different TimeZone values and want to compare the start of the day? (Only you can answer why you would need that, but just assume you do 😅)

Let's just say, we want to know if Berlin or New York City celebrated New Year's Day in 1971 first.

...
func startOfDayIn(date: Date, timeZone: TimeZone) -> Date {
    var calendar = Calendar.current
    calendar.timeZone = timeZone
    return calendar.startOfDay(for: date)
}

let date = Date(timeIntervalSince1970: 60 * 60 * 24 * 365) // 1971-01-01 00:00:00
let timeZone1 = TimeZone(secondsFromGMT: 60 * 60 * 1)! // Berlin
let start1 = startOfDayIn(date: date, timeZone: timeZone1)
let timeZone2 = TimeZone(secondsFromGMT: 60 * 60 * -8)! // New York City
let start2 = startOfDayIn(date: date, timeZone: timeZone2)

compareDates(date1: start1, date2: start2)

Well that was easy 😁 We get as a result..

Wait, what?? "date1 is later in time than date2" 😳🤯😱 How is that even possible? The day in Berlin starts earlier than the day in New York, it should have been "date1 is earlier in time than date2" !!!

So let's investigate this. 🧐

First, let's print a few startTimes to compare them. Since we used January 1st, we can be sure that it's not a problem because the date is before year 1970.

(-12...12).reversed().forEach { deviation in
    let timeZone = TimeZone(secondsFromGMT: 60 * 60 * deviation)!
    let start = startOfDayIn(date: date, timeZone: timeZone)

    print(start, "| UTC\(deviation >= 0 ? "+" : "")\(deviation)")
}

This gives us the following list:

Date	Timezone
1970-12-31 12:00:00 +0000	UTC+12
1970-12-31 13:00:00 +0000	UTC+11
1970-12-31 14:00:00 +0000	UTC+10
1970-12-31 15:00:00 +0000	UTC+9
1970-12-31 16:00:00 +0000	UTC+8
1970-12-31 17:00:00 +0000	UTC+7
1970-12-31 18:00:00 +0000	UTC+6
1970-12-31 19:00:00 +0000	UTC+5
1970-12-31 20:00:00 +0000	UTC+4
1970-12-31 21:00:00 +0000	UTC+3
1970-12-31 22:00:00 +0000	UTC+2
1970-12-31 23:00:00 +0000	UTC+1
1971-01-01 00:00:00 +0000	UTC+0
1970-12-31 01:00:00 +0000	UTC-1	Why are we back in 1970 again??
1970-12-31 02:00:00 +0000	UTC-2
1970-12-31 03:00:00 +0000	UTC-3
1970-12-31 04:00:00 +0000	UTC-4
1970-12-31 05:00:00 +0000	UTC-5
1970-12-31 06:00:00 +0000	UTC-6
1970-12-31 07:00:00 +0000	UTC-7
1970-12-31 08:00:00 +0000	UTC-8
1970-12-31 09:00:00 +0000	UTC-9
1970-12-31 10:00:00 +0000	UTC-10
1970-12-31 11:00:00 +0000	UTC-11
1970-12-31 12:00:00 +0000	UTC-12

Ok, the first lines until UTC+0 look as expected. But why is the rest wrong?

The solution is rather simple. There were too many (or rather too few) TimeZone conversions!

When we used the timezone for New York UTC-8, we used "1971-01-01 00:00:00" as date value. But this is in UTC+0! The date in UTC-8 is actually "1970-12-31 18:00:00 -0800". When we call startOfDay, we get "1970-12-31 00:00:00 -0800" which is in UTC+0 "1970-12-31 08:00:00 +0000".
This means, the result is actually correct, but our function is not 🙈

So let's fix it 💪

func adjustedStartOfDayIn(date: Date, timeZone: TimeZone) -> Date {
    var calendar = Calendar.current
    calendar.timeZone = timeZone
    let correctDay = date.addingTimeInterval(TimeInterval(-calendar.timeZone.secondsFromGMT()))
    return calendar.startOfDay(for: correctDay)
}

let correctStart1 = adjustedStartOfDayIn(date: date, timeZone: timeZone1)
let correctStart2 = adjustedStartOfDayIn(date: date, timeZone: timeZone2)

compareDates(date1: correctStart1, date2: correctStart1)

Now we get "date1 is earlier in time than date2" as result, just as expected. 😁
The key for the solution here is that we didn't use date directly but shifted it by the offset of the specific timezone and UTC, so we get the startOfDay in the timezone we want to use.

Conclusion: Don't mess with timezones!

You can find the complete code here.

How to Write a Distance Converter in Swift/SwiftUI

Katharina Gopp — Tue, 05 Oct 2021 11:25:10 +0000

In this tutorial, we will build a simple distance converter for iOS with SwiftUI. We will take a look at how to read user input as a Double and how to prevent the user from entering faulty values.

Once completed, we will be able to enter a distance with a start unit and select the unit we want to convert the distance into. Also, we will add a conversion history of the current session, which will be deleted after closing the app.

So let's get started 😀

Step 1: Modeling the Different Units

We start by creating an enum for the different units. For readability, we use the full name for the cases and add an abbreviation, which we assign as a corresponding String. Additionaly, we need our enum to conform to the CaseIterable protocol, so that we can later use DistanceUnit.allCases in our Picker.

enum DistanceUnit: String, CaseIterable {
    case inch = "in"
    case foot = "ft"
    case yard = "yd"
    case meter = "m"
    case kilometer = "km"
    case mile = "mi"
    case nauticMile = "nmi"
}

Step 2: Add a Conversion Struct

To record a conversion history, we create first a new struct called Conversion so we can use then an Array of Conversion for our conversion history. In Conversion, we save the start value and unit as well as the end value and unit. Since we later want to use the Array of Conversion in a list, Conversion has to conform to the Identifiable protocol, so we have to add an id as well.

struct Conversion: Identifiable {
    var id: UUID = UUID()

    var startValue: Double = 0.0
    var startDistanceUnit: DistanceUnit = .kilometer
    var endValue: Double = 0.0
    var endDistanceUnit: DistanceUnit = .mile
}

Step 3: Build a UI for the App

In the body of our ContentView, we build our UI. It contains a headline, the conversion input, a button and the history of conversions as a list.

struct ContentView: View {
    @State var startDistanceUnit: DistanceUnit = .kilometer
    @State var endDistanceUnit: DistanceUnit = .mile
    @State var startValueString = ""

    @State var conversionHistory: [Conversion] = []

    var body: some View {
        VStack {
            // Headline
            Text("Distance Conversion")
                .font(.title)
                .bold()
                .padding()

            // Conversion Input
            HStack {
                Text("Distance:")
                TextField("e.g. 5.3", text: $startValueString)
                Picker("\(startDistanceUnit.rawValue)", selection: $startUnit) {
                    ForEach(DistanceUnit.allCases, id: \.self) { unit in
                        Text(unit.rawValue)
                    }
                }
                .pickerStyle(MenuPickerStyle())
            }
            .padding(.horizontal, 25)

            HStack {
                Spacer()

                Text("Convert to: ")
                Picker("\(endDistanceUnit.rawValue)", selection: $endUnit) {
                    ForEach(DistanceUnit.allCases, id: \.self) { distanceUnit in
                        Text(distanceUnit.rawValue)
                    }
                }
                .pickerStyle(MenuPickerStyle())
            }

            // Convert Button
            HStack {
                Spacer()

                Button(action: {
                    // TODO: add conversion
                }) {
                    Text("Convert")
                }
                .padding()
                .background(Color.green)
                .foregroundColor(.black)
                .cornerRadius(15)

                Spacer()
            }

            // Conversion History
            List {
                ForEach(conversionHistory.reversed()) { currentConversion in
                    HStack {
                        Spacer()

                        Text("\(currentConversion.startValue) \(currentConversion.startDistanceUnit.rawValue) -> \(currentConversion.endValue) \(currentConversion.endDistanceUnit.rawValue)")

                        Spacer()
                    }
                }
            }
        }
    }
}

It should look like this:

Step 4: Implement Button Action

Next, we need a function to convert our start value and save it as a Conversion in our conversionHistory array. Therefore, we add the functions convertUnit and saveConversion and call saveConversion() in our Button.

One way of calculating the conversion is to use a nested switch statement. But then we have in each switch case again all other switch cases. That would lead to n² statements for n distance units. And the more units we use, the longer and more unpleasent the statement will get.

Another way to calculate it is the use of a conversion factor for each case of our enum. When multiplying a distance with this conversion factor, we get the distance in meters. To use this factor, we add a variable to UnitSystem called conversionFactorToMeters:

extension DistanceUnit {
    var conversionFactorToMeter: Double {
        switch self {
        case .inch:
            return 0.0254
        case .foot:
            return 0.3048
        case .yard:
            return 0.9144
        case .meter:
            return 1
        case .kilometer:
            return 1000
        case .mile:
            return 1609.344
        case .nauticMile:
            return 1852
        }
    }
}

With this, we can simply convert our value to meters by multiplying the conversion factor of the startUnit and then to the specified unit by dividing with the conversion factor of the endUnit. This gives us to the following functions:

struct ContentView: View {
    // ...

    var body: some View {
        // ...

        Button(action: {
            saveConversion()
        }) {
            Text("Convert")
        }
        // ...
    }

    // Functions
    func convertUnit(valueToConvert: Double, fromUnit: DistanceUnit, toUnit: DistanceUnit) -> Double {
        return valueToConvert * fromUnit.conversionFactorToMeter / toUnit.conversionFactorToMeter
    }

    func saveConversion() {
        var conversion = Conversion()

        conversion.startUnit = startUnit
        conversion.endUnit = endUnit
        conversion.startValue = Double(startValueString) ?? 0.0
        conversion.endValue = convertUnit(valueToConvert: conversion.startValue, fromUnit: startUnit, toUnit: endUnit)

        conversions.append(conversion)
    }
}

Congratulations, you have a fully functioning Distance Converter App!

But...

If you try it, you will see that it isn't really user-friendly. So let's change that!

Since we only put Double values into our TextField, we can set the keyboardType to .decimalPad:

struct ContentView: View {
    // ...
    var body: some View {
        // ...

        TextField("e.g. 5.3", text: $startValueString)
            .keyboardType(.decimalPad)

        // ...
    }
    // ...
}

While this modifier prevents us from typing anything other than numbers and decimal separators, we can still paste other text. Furthermore, we can type multiple decimal separators. This means that we don't have a decimal input which results in using the default value as startValue, which is 0.

Step 5: Prevent Faulty Input

While searching for a solution for this problem, I came across this blog post. In this blog post is a solution how to use a TextField for numbers only. Since it should work not only for Integer but also for Double values, I made some adjustments:

First we add a new class called ValidatedDecimal, which has a variable valueString. When this variable is set, we check each char whether it is a number or the first decimal separator. All other characters will be filtered. Additionally, if the first input is a decimal separator, we add a 0 upfront.

class ValidatedDecimal: ObservableObject {
    @Published var valueString = "" {
        didSet {
            var hasDecimalSeparator = false
            var filteredString = ""

            for char in valueString {
                if char.isNumber {
                    filteredString.append(char)
                } else if String(char) == Locale.current.decimalSeparator && !hasDecimalSeparator {
                    if filteredString.count == 0 {
                        filteredString = "0"
                    }
                    filteredString.append(char)
                    hasDecimalSeparator = true
                }
            }

            if valueString != filteredString {
                valueString = filteredString
            }
        }
    }
}

Now we have to change a few things in our ContentView: Instead of the startValueString we use an instance of ValidatedDecimal called startValue and bind the input from the TextField to the variable valueString from startValue. In the function saveConversion() we also have to replace startValueString with startValue.valueString.

struct ContentView: View {
    // ...

    // @State var startValueString = ""
    @ObservedObject var startValue = ValidatedDecimal()

    // ...

    var body: some View {
        // ...

        TextField("e.g. 5.3", text: $startValue.valueString)

        // ...
    }
    // ...

    func saveConversion() {
        // ...

        conversion.startValue = Double(startValue.valueString) ?? 0.0

        // ...
    }
}

This already looks quite nice 😃 So we could stop here.

Or...

We take another look into the different regional settings. While this code works with a dot as decimal separator, it does not work in regions, where the decimal separator is a comma. So let's fix that.

Step 6: Taking Regional Settings into Account

If your region is using a decimal comma, we run into a problem:

Since we use the KeyboardType .decimalPad, the comma is shown as decimal separator, which is what we want. But when casting the string into a double, we need a decimal dot instead. Otherwise the string will not be recognized as double and we get our default value of 0.0 😕

To fix this, we add a computed property to ValidatedDecimal, which we simply call decimalValue. In this variable we take the valueString, replace the decimal separator with a "." and return the resulting value as Double:

class ValidatedDecimal: ObservableObject {
    // ...

    var decimalValue: Double {
        let replacedString = valueString.replacingOccurrences(of: Locale.current.decimalSeparator!, with: ".")

        return Double(replacedString) ?? 0
    }
}

Now we only have to use decimalValue as startValue for the Conversion in the ContentView. Also, we change the decimal point of the text in the TextField to Locale.current.decimalSeparator to be consistent.

struct ContentView: View {
    // ...

    var body: some View {
        // ...

        TextField("e.g. 5\(Locale.current.decimalSeparator!)3", text: $startValue.valueString)

        // ...
    }
    // ...

    func saveConversion() {
        // ...

        // conversion.startValue = Double(startValue.valueString) ?? 0.0
        conversion.startValue = startValue.decimalValue

        // ...
    }
}

Wow, this looks like we're finished 😃

On the other hand...

By making some minor adjustments we can make it more readable and user-friendly.

Step 7: Final Adjustments

First of all, we don't want to always delete the previous input. So we add a reset() function to our code.

struct ContentView: View {
    // ...

    var body: some View {
        // ...

        Button(action: {
            saveConversion()
            resetInput()
        }) {
            Text("Convert")
        }
        // ...
    }

    // Functions
    // ...

    func resetInput() {
        startValue.valueString = ""
    }
}

Also, we don't want to see trailing zeros in our history, so let's add a NumberFormatter. In this formatter, we can set the maximum accuracy of the conversion by setting a value to the property .maximumFractionDigits. Please note, however, that we should not set this too high, as the conversion and the floating point arithmetic of our double value can lead to inaccuracy.

For readability, we put the corresponding code into functions:

struct ContentView: View {
    // ...
    var body: some View {
        // ...

        List {
                ForEach(conversions.reversed()) { currentConversion in
                    HStack {
                        Spacer()

                        Text(printConversion(conversion: currentConversion))

                        Spacer()
                    }
                }
            }

        // ...
    }
    // Functions
    // ...

    func printConversion(conversion: Conversion) -> String {
        return printDistanceWithUnit(distance: conversion.startValue, unit: conversion.startUnit) + " -> " + printDistanceWithUnit(distance: conversion.endValue, unit: conversion.endUnit)
    }

    func printDistanceWithUnit(distance: Double, unit: DistanceUnit) -> String {
        let formatter = NumberFormatter()
        formatter.numberStyle = .decimal
        formatter.maximumFractionDigits = 6 // Change this value for accuracy

        var returnString = ""

        let value = NSNumber(value: distance)
        if let distanceString = formatter.string(from: value) {
            returnString = distanceString + " " + unit.rawValue
        }

        return returnString
    }
}

Finally, to prevent tapping the Button and adding lot of zero to zero conversions, we disable the convert Button if the TextField is blank and change it's color to make the deactivation visible.

struct ContentView: View {
    // ...
    var body: some View {
        // ...

        Button(action: {
                    saveConversion()
                    resetInput()
                }) {
                    Text("Convert")
                }
                .disabled(startValue.valueString == "")
                .padding()
                .background(startValue.valueString == "" ? Color.gray : Color.green)
                .foregroundColor(startValue.valueString == "" ? .black.opacity(0.2) : .black)
                .cornerRadius(15)        
        // ...
    }
    // ...
}

So that's it, we made a distance converter app 👍🏻

You can find the full source code here.

Conclusion

I hope this post helped you to implement a conversion app and how to use a TextField for Double input. And while there is no built in option to prevent faulty input in a TextField, we can always create our own input validator 😉.