SwiftUI DatePicker Binding optional Date, valid nil

Question

I'm experimenting code from https://alanquatermain.me/programming/swiftui/2019-11-15-CoreData-and-bindings/

my goal is to have DatePicker bind to Binding< Date? > which allow for nil value instead of initiate to Date(); this is useful, if you have Date attribute in your core data model entity which accept nil as valid value.

Here is my swift playground code:

extension Binding {
    init<T>(isNotNil source: Binding<T?>, defaultValue: T) where Value == Bool {
        self.init(get: { source.wrappedValue != nil },
                  set: { source.wrappedValue = $0 ? defaultValue : nil})
    }
}

struct LiveView: View {
    @State private var testDate: Date? = nil
    var body: some View {
        VStack {
            Text("abc")

            Toggle("Has Due Date",
                   isOn: Binding(isNotNil: $testDate, defaultValue: Date()))

            if testDate != nil {
                DatePicker(
                    "Due Date",
                    selection: Binding($testDate)!,
                    displayedComponents: .date
                )
            }
        }
    }
}

let liveView = LiveView()
PlaygroundPage.current.liveView = UIHostingController(rootView: liveView)

I can't find solution to fix this code. It works when the toggle first toggled to on, but crash when the toggle turned back off.

The code seems to behave properly when I removed the DatePicker, and change the code to following:

extension Binding {
    init<T>(isNotNil source: Binding<T?>, defaultValue: T) where Value == Bool {
        self.init(get: { source.wrappedValue != nil },
                  set: { source.wrappedValue = $0 ? defaultValue : nil})
    }
}

struct LiveView: View {
    @State private var testDate: Date? = nil
    var body: some View {
        VStack {
            Text("abc")

            Toggle("Has Due Date",
                   isOn: Binding(isNotNil: $testDate, defaultValue: Date()))

            if testDate != nil {
                Text("\(testDate!)")
            }
        }
    }
}

let liveView = LiveView()
PlaygroundPage.current.liveView = UIHostingController(rootView: liveView)

I suspect it's something to do with this part of the code

DatePicker("Due Date", selection: Binding($testDate)!, displayedComponents: .date )

or

problem when the source.wrappedValue set back to nil (refer to Binding extension)

Martijn Pieters · Accepted Answer · 2022-08-23 14:09:28Z

26

The problem is that DatePicker grabs binding and is not so fast to release it even when you remove it from view, due to Toggle action, so it crashes on force unwrap optional, which becomes nil ...

The solution for this crash is

DatePicker(
    "Due Date",
    selection: Binding<Date>(get: {self.testDate ?? Date()}, set: {self.testDate = $0}),
    displayedComponents: .date
)

edited Aug 23, 2022 at 14:09

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

answered Dec 10, 2019 at 19:59

Asperi

262k28 gold badges594 silver badges889 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

wk.experimental Over a year ago

Your solution fixed the crash but is not behaving as it intended, because we want the DatePicker to modify the value of testDate. In your code, the DatePicker selection bind to .constant(Date()) instead of testDate when the toggle on. However, I think you're right that the crash due to force unwrap nil optional, seems that when the toggle turned off DatePicker still trying to unwrap optional(which now set to nil), I expect the code not doing that since I already put a check if testdate != nil which incorrect. Still looking for solution to resolve this.

Asperi Over a year ago

Updated with another non-crashable variant

emehex · Accepted Answer · 2022-12-15 16:59:26Z

6

Most optional binding problems can be solved with this:

public func ??<T>(lhs: Binding<Optional<T>>, rhs: T) -> Binding<T> {
    Binding(
        get: { lhs.wrappedValue ?? rhs },
        set: { lhs.wrappedValue = $0 }
    )
}

Here's how I use it with DatePicker:

DatePicker(
    "",
    selection: $testDate ?? Date(),
    displayedComponents: [.date]
)

answered Dec 15, 2022 at 16:59

emehex

10.7k11 gold badges61 silver badges111 bronze badges

1 Comment

Sentry.co Over a year ago

Nice binding hack! Thanks!

andrewbuilder · Accepted Answer · 2021-12-01 12:42:08Z

An alternative solution that I use in all my SwiftUI pickers...

I learned almost all I know about SwiftUI Bindings (with Core Data) by reading that blog by Jim Dovey. The remainder is a combination of some research and quite a few hours of making mistakes.

So when I use Jim's technique to create Extensions on SwiftUI Binding then we end up with something like this for a deselection to nil...

public extension Binding where Value: Equatable {
    init(_ source: Binding<Value>, deselectTo value: Value) {
        self.init(get: { source.wrappedValue },
                  set: { source.wrappedValue = $0 == source.wrappedValue ? value : $0 }
        )
    }
}

Which can then be used throughout your code like this...

Picker("Due Date", 
       selection: Binding($testDate, deselectTo: nil),
       displayedComponents: .date
)

OR when using .pickerStyle(.segmented)

Picker("Date Format Options", // for example 
       selection: Binding($selection, deselectTo: -1)) { ... }
    .pickerStyle(.segmented)

... which sets the index of the segmented style picker to -1 as per the documentation for UISegmentedControl and selectedSegmentIndex.

The default value is noSegment (no segment selected) until the user touches a segment. Set this property to -1 to turn off the current selection.

kittonian · Accepted Answer · 2023-04-10 19:04:24Z

4

To solve this issue, you create an extension on Binding to automatically provide with an easy way to use optionals. Place this where your other global extensions exist in your project.

extension Binding {
    func bindUnwrap<T>(defaultVal: T) -> Binding<T> where Value == T? {
        Binding<T>(
            get: {
                self.wrappedValue ?? defaultVal
            }, set: {
                self.wrappedValue = $0
            }
        )
    }
}

Then, to use that extension with a DatePicker in a view:

DatePicker(
    "My Title",
    selection: $myVar.bindUnwrap(defaultVal: Date()),
    in: ...Date(),
    displayedComponents: [.date]
)

Hope that helps!

answered Apr 10, 2023 at 19:04

kittonian

1,53418 silver badges50 bronze badges

Comments

Fiser · Accepted Answer · 2022-06-24 15:14:41Z

2

Here is my solution, I added a button to remove the date and add a default date. All it's wrapped in a new component

https://gist.github.com/Fiser12/62ef54ba0048e5b62cf2f2a61f279492

import SwiftUI

struct NullableBindedValue<T>: View {
    var value: Binding<T?>
    var defaultView: (Binding<T>, @escaping (T?) -> Void) -> AnyView
    var nullView: ( @escaping (T?) -> Void) -> AnyView

    init(
        _ value: Binding<T?>,
        defaultView: @escaping (Binding<T>, @escaping (T?) -> Void) -> AnyView,
        nullView: @escaping ( @escaping (T?) -> Void) -> AnyView
    ) {
        self.value = value
        self.defaultView = defaultView
        self.nullView = nullView
    }

    func setValue(newValue: T?) {
        self.value.wrappedValue = newValue
    }

    var body: some View {
        HStack(spacing: 0) {
            if value.unwrap() != nil {
                defaultView(value.unwrap()!, setValue)
            } else {
                nullView(setValue)
            }
        }
    }
}

struct DatePickerNullable: View {
    var title: String
    var selected: Binding<Date?>
    @State var defaultToday: Bool = false

    var body: some View {
        NullableBindedValue(
            selected,
            defaultView: { date, setDate in
                let setDateNil = {
                    setDate(nil)
                    self.defaultToday = false
                }

                return AnyView(
                    HStack {
                        DatePicker(
                            "",
                            selection: date,
                            displayedComponents: [.date, .hourAndMinute]
                        ).font(.title2)
                        Button(action: setDateNil) {
                            Image(systemName: "xmark.circle")
                                .foregroundColor(Color.defaultColor)
                                .font(.title2)
                        }
                        .buttonStyle(PlainButtonStyle())
                        .background(Color.clear)
                        .cornerRadius(10)
                    }
                )
            },
            nullView: { setDate in
                let setDateNow = {
                    setDate(Date())
                }

                return AnyView(
                    HStack {
                        TextField(
                            title,
                            text: .constant("Is empty")
                        ).font(.title2).disabled(true).textFieldStyle(RoundedBorderTextFieldStyle())
                        Button(action: setDateNow) {
                            Image(systemName: "plus.circle")
                                .foregroundColor(Color.defaultColor)
                                .font(.title2)
                        }
                        .buttonStyle(PlainButtonStyle())
                        .background(Color.clear)
                        .cornerRadius(10)
                    }.onAppear(perform: {
                        if self.defaultToday {
                            setDateNow()
                        }
                    })
                )
            }
        )
    }
}

edited Jun 24, 2022 at 15:14

answered Jun 24, 2022 at 15:13

Fiser

438 bronze badges

4 Comments

malhal Over a year ago

I think it's best to avoid the if in the body of the NullableBindedValue View

Sentry.co Over a year ago

Nice solution! Could maybe be more readable if typealias was used for the lengthy variable signatures?

Fiser Over a year ago

Yes I agree, the typealias would good to improve readability. Why you thing that would be best to avoid the if?, it's necessary. Another stuff that could be improve is to remove the AnyView, for example with 2 generic views

Wizard of Kneup Over a year ago

I used the version provided via gist in the answer. Thank you!

Collectives™ on Stack Overflow

SwiftUI DatePicker Binding optional Date, valid nil

5 Answers 5

2 Comments

1 Comment

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related