How to use ObservedObject with DatePicker in SwiftUI? - datepicker

Question

This class receives and send network requests updating the timers array
struct ScheduleTimer: Identifiable {
var id: Int
var name: String
#State var start: Date
#State var end: Date
#State var isActive: Bool
}
class ScheduleController: ObservableObject, NetworkDelegate {
var didChange = PassthroughSubject<Void, Never>()
#Published var timers = [ScheduleTimer]()
...
This is my SwiftUI view in here I want the date pickers and the toggle to change the values kept in the timers array but I don't know how to go about that in SwiftUI, using timer.start, timer.end and timer.isActive throws errors.
struct ScheduleView: View {
#ObservedObject var scheduleController = ScheduleController()
var body: some View {
NavigationView {
Form {
ForEach(scheduleController.timers) { timer in
Section(header: Text(timer.name)){
DatePicker("From", selection: timer.start, displayedComponents: .hourAndMinute)
DatePicker("To", selection: timer.end, displayedComponents: .hourAndMinute)
Toggle(isOn: timer.isActive) {
Text("")
}.toggleStyle(DefaultToggleStyle())
}
}
}
}
}
}

Answer 1

Solved it by taking an extensive look at Apple's SwiftUI tutorial: https://developer.apple.com/tutorials/swiftui/handling-user-input
struct ScheduleTimer: Identifiable {
var id: Int
var name: String
var start: Date
var end: Date
var isActive: Bool
}
struct ScheduleView: View {
#ObservedObject var scheduleController = ScheduleController()
var body: some View {
NavigationView {
Form {
ForEach(scheduleController.timers) { timer in
ScheduleForm(scheduleController: self.scheduleController, timer: timer)
}
}
}
}
}
struct ScheduleForm: View {
#ObservedObject var scheduleController: ScheduleController
var timer: ScheduleTimer
var scheduleIndex: Int {
scheduleController.timers.firstIndex(where: { $0.id == timer.id })!
}
#State var start = Date()
var body: some View {
Section(header: Text(self.scheduleController.timers[scheduleIndex].name)){
DatePicker("From", selection: self.$scheduleController.timers[scheduleIndex].start, displayedComponents: .hourAndMinute)
DatePicker("To", selection: self.$scheduleController.timers[scheduleIndex].end, displayedComponents: .hourAndMinute)
Toggle(isOn: self.$scheduleController.timers[scheduleIndex].isActive) {
Text("")
}.toggleStyle(DefaultToggleStyle())
}
}
}