How to create a time picker?

Question

Created Nov ’19

Replies 1

Boosts 0

Views 2.3k

Participants 2

import SwiftUI

struct NotificationSettings: View {
  @State private var dailyReminder = false
  
    var body: some View {
     VStack {
        Toggle(isOn: $dailyReminder) {
            Text("Daily reminder")
        }

        Spacer()
      }
        .navigationBarTitle(Text(verbatim: "Notifications"))
    }

}

After toggling daily reminder, I'd like to create a time picker for the user to select when the daily reminder/notification will occur. I thought something like DatePicker would suit my needs but then it said it is not supported in WatchOS. So what other alternatives are available? Thanks.

Boost

Answer 1

Jim Dovey OP

Nov ’19

The way to do this sort of thing with WatchKit is to use two pickers side by side with a ":" in between. In WatchKit you'd use WKInterfacePicker in the List style, and you'd have two sets of numbers to scroll through. You might be able to construct this using two regular Picker instances, but I'm not sure.

In SwiftUI, though, you have a little more to play with. You don't necessarily need to use a Picker, you can just make a Text view and hook it up to the digital crown. A rough example might be:

struct TimePicker: View {
   // Start timer at mid-day
    @State private var seconds: TimeInterval = 60 * 60 * 12

    static let formatter: DateComponentsFormatter = {
        let formatter = DateComponentsFormatter()
        formatter.allowedUnits = [.hour, .minute]
        return formatter
    }()

    var body: some View {
        Text(Self.formatter.string(from: seconds)!)
            .font(.title)
            .digitalCrownRotation(
                $seconds, from: 0, through: 60 * 60 * 24 - 1, by: 60)
    }

}

0