How can I format an Int in "hh:mm" in SwiftUI?

Question

I have a very simple thought, although it seems like this is almost impossible in SwiftUI.

I would like users to be able to enter numbers into a SwiftUI TextField and display those entered numbers as "hh:mm". So for example a user enters 3230, the app should display is as 32:30 which would be the run time for a step in a bread recipe.

Somehow I can't figure out how to make the user experience smooth. I want the user to see the result immediately. I need the user to be able to enter the numbers in and immediately want to update the UI based on the entered numbers. I currently have it implemented with just minutes and it works fine. With hours and minutes, I can't seem to get it working.

Does anyone have an idea? Maybe a custom NSNumberFormatter is an option?

The hurdles I am facing are:

• Formatting while entering the numbers
• Updating the UI while entering
• Keeping the UX intuitive and easy

The code I currently use is:

TextEditor(text: Binding(get: {
                        if step.stepDuration == 0 { return "" }
                        else { return String(step.stepDuration) }
                    }, set: { (newValue) in
                        guard let recipe = step.parent else { return }
                        recipe.objectWillChange.send()
                        step.stepDuration = Int64(newValue) ?? 0
                    }))
                    .frame(maxWidth: 60)
                    .multilineTextAlignment(.trailing)
                    .keyboardType(.numberPad)

The result I get is this:

And this is the result I would like (with a smooth user experience while entering).

I hope someone can help me with this I am loosing my mind here. :O

Answer 1

A possible solution is DateComponentsFormatter

let value = 3230 
let components = DateComponents(hour:value / 100, minute:value % 100)
let formatter = DateComponentsFormatter()
formatter.allowedUnits = [.hour, .minute]
let string = formatter.string(from: components)