SwiftUI: Compact DatePicker with custom design

user_27404 0
Viewed 1034

I need a custom "label" with the behavior of opening the date picker in some kind of popover, even on the iPhone.

When I use the built in DatePicker with compact format, I have the behavior with opening the wheels in a popover, but I cannot customize the look of the "collapsed" version with the gray background (in fact, I can change it to some other color, but not to white e.g., it simply doesn't work).

Another option would be to have a custom Text wrapped inside a Button and then open the DatePicker, but I don't know how to achieve the popover effect on the iPhone. So I guess the first option would be the easier one, but how can I achieve a custom layout for the compact date picker? Nothing super fancy, just something like this:

enter image description here

instead of something like this

enter image description here

swiftui datepicker
1 Answers

its more of a proof of concept, but this might be a way:

    Button {
        withAnimation {
            showPicker.toggle()
        }
    }  label: {
        Text("05:00")
            .padding()
            .padding(.horizontal)
            .background(
                RoundedRectangle(cornerRadius: 10)
                    .stroke(Color.gray)
            )
    }
    .background(
        DatePicker("", selection: $date, displayedComponents: .hourAndMinute)
            .datePickerStyle(.wheel)
            .frame(width: 200, height: 100)
            .clipped()
            .background(Color.gray.cornerRadius(10))
            .opacity(showPicker ? 1 : 0 )
            .offset(x: 50, y: 90)
    )
user_178967760
Related