4

I have the following:

DatePicker("Time between meals", selection: $time, displayedComponents: .hourAndMinute)

But I need to show instead of a date, a wheel to select the hours and minutes I want, as the variable says, for the time between meals, let's say 3h and 2 mts instead of 7:00 PM. How can I do that?

This is what I need:

enter image description here

Thanks

Arturo
  • 3,254
  • 2
  • 22
  • 61

1 Answers1

6

DatePicker only does date. You will have to make 2 custom pickers side by side, eg:

@State var hours: Int = 0
@State var minutes: Int = 0

var body: some View {
            HStack {
                Picker("", selection: $hours){
                    ForEach(0..<4, id: \.self) { i in
                        Text("\(i) hours").tag(i)
                    }
                }.pickerStyle(WheelPickerStyle())
                Picker("", selection: $minutes){
                    ForEach(0..<60, id: \.self) { i in
                        Text("\(i) min").tag(i)
                    }
                }.pickerStyle(WheelPickerStyle())
    }.padding(.horizontal)
}
workingdog support Ukraine
  • 26,280
  • 4
  • 27
  • 37
  • That looks a little weird, how can I make it look like the image above? There has to be a way to unify it instead of divide it in two – Arturo Apr 27 '20 at 00:44
  • you can adjust the frame of both pickers., eg: .frame(width: 100).clipped(). And put some Spacer() at the start and end of the HStack – workingdog support Ukraine Apr 27 '20 at 01:00
  • Yes, I can adjust it, but it's not hidden in the view, it shows all the picker ui, how can I make it hide and once you click it, it folds or something? – Arturo Apr 27 '20 at 04:46
  • This might be also a solution: https://stackoverflow.com/questions/56567539/multi-component-picker-uipickerview-in-swiftui – Neph Muw Sep 27 '22 at 13:14