0

I have to design a DatePicker to looks like in the picture. On click i want to use the default popover used.

Any idea how i can achieve the given UI with a DatePicker?

My Approaches

First

Initially i tried to change the default style (background colors, width, ...) but the compact mode of the DatePicker can't be styled much. After trying stuff for a while i gave up since i got the feeling Apple doesn't really allow this.

Second

Second try my idea was to simply wrap it in a ZStack, put a styled Text over it and use .allowsHitTesting(false) to let the DatePicker receive any click events. This worked really well. Logically the DatePicker would have to cover the whole Text for this to work flawlessly. As you can hopefully see here the DatePicker doesn't stretch, therefore the click only works on the DatePicker area (i added .opacity for to be visual).

The only way i found to actually increase the click area of a DatePicker was using .scaleEffect, but doing so also allowed clicks out of the .clipped and .contentShape'd box.

ZStack(alignment: .leading) {
    DatePicker("", selection: $date, displayedComponents: [.date])
//    .scaleEffect(x: 10)
    .accentColor(.raActionPrimary)
    .labelsHidden()
    .padding(6)
    .frame(maxWidth: .infinity, alignment: .leading)
    .contentShape(Rectangle())
    .clipped()

    Group {
        if let date = date {
            Text(DateFormatter.regulaFormatter.string(from: date))
        }
        else {
            Text(String(" "))
        }
    }
    .frame(maxWidth: .infinity, alignment: .leading)
    .padding(12)
    .background(Color.white)
    .allowsHitTesting(false)
}

Third

My third idea was to handle the Popover completely manually using .popover(isPresented:), but this way the DatePicker would show as a sheet on the iPhone which would be undesired behavior thus not an option.

Deitsch
  • 1,610
  • 14
  • 28
  • I don't think this is possible using `SwiftUI`. Take a look at a [`UIDatePicker`](https://developer.apple.com/documentation/uikit/uidatepicker) - that will allow much more customizability. –  May 18 '22 at 14:13
  • 1
    The UIDatePicker also no solves this properly, i found a solution by manually calculating the scale factor of the scale property, i'll answer it once the wrongful flag is removed – Deitsch May 19 '22 at 11:18

0 Answers0