SwiftUI/macOS: DatePicker without background field

Question

How do I get rid of the shaded background of the DatePicker field in macOS(!)?
.textFieldStyle or .background have no effect.

I tried this: Changing TextEditor background color in SwiftUI for macOS but seems to work only for TextField, TextEditor. Is there another NSView property that could be set?

        DatePicker("Start",
                   selection: $newDate,
                   displayedComponents: [.date])
            .datePickerStyle(.field)
//          .textFieldStyle(.plain)
//          .background(.clear)

score 5 · Accepted Answer · edited Aug 23 '22 at 13:50

Here is a simplified demo of representable wrapper approach

Tested with Xcode 13.2 / macOS 12.1

struct DemoView: View {
    @State private var newDate: Date = Date()

    var body: some View {
        VStack {
            Text("Selected: \(newDate)")
            MyDatePicker(selection: $newDate)
        }
    }
}

struct MyDatePicker: NSViewRepresentable {
    @Binding var selection: Date

    func makeNSView(context: Context) -> NSDatePicker {
        let picker = NSDatePicker()
        picker.isBordered = false
        picker.datePickerStyle = .textField
        picker.action = #selector(Coordinator.onValueChange(_:))
        picker.target = context.coordinator
        return picker
    }

    func updateNSView(_ picker: NSDatePicker, context: Context) {
        picker.dateValue = selection
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(owner: self)
    }

    class Coordinator: NSObject {
        private let owner: MyDatePicker
        init(owner: MyDatePicker) {
            self.owner = owner
        }

        @objc func onValueChange(_ sender: Any?) {
            if let picker = sender as? NSDatePicker {
                owner.selection = picker.dateValue
            }
        }
    }
}

thanks a lot. I was struggling with NSDatePicker not having a NSDatePickerDelegate – as I have zero knowledge of AppKit ... I don't want to be too demanding, but: Is there also a way to show the graphical calendar pricker when selecting a cell? — ChrisR, Feb 05 '22 at 17:12

score 0 · Answer 2 · answered Feb 05 '22 at 14:33

0

Found it, based on @Davidev's original answer mentioned above. With this extension .background on the DatePicker works.

extension NSDatePicker {
    open override var frame: CGRect {
        didSet {
            backgroundColor = .clear //<<here clear
            isBezeled = false
            isBordered = false
            drawsBackground = true
        }
    }
}

answered Feb 05 '22 at 14:33

ChrisR

9,523
1
8
26

Bad (hack) approach - you change ALL date pickers in app, moreover if Apple decides to change internal implementation of SwiftUI DatePicker (which is a observed direction) then your already delivered application stops working in end-users. It would be more appropriate to use explicit own wrapper `NSViewRepresentable` around `NSDatePicker` with corresponding styles applied. – Asperi Feb 05 '22 at 15:05
agreed. I'll work on that. – ChrisR Feb 05 '22 at 15:54

SwiftUI/macOS: DatePicker without background field

2 Answers2