2

I'm trying two write a custom Datepicker so that I can modify the button style. As far as I know, SwiftUI doesn't allow to modify it. My base design based on this answer that I've already improved it.

struct CustomDatePickerView: View {
    @State private var showPicker = false
    
    @State var selectedText: String
    @State var selectedDateLocal : Date = Date()
    
    var body: some View {
         VStack {
            Button {
                withAnimation {
                    showPicker.toggle()
                }
            }  label: {
                Text(selectedText)
                    .padding()
                    .padding(.horizontal)
                    .foregroundColor(.black)
                    .background(
                        RoundedRectangle( cornerRadius:10, style: .continuous).fill(Color.yellow.opacity(0.2))
                    )
                    .overlay(
                        RoundedRectangle(cornerRadius: 10, style: .continuous)
                            .strokeBorder(Color.black, lineWidth: 1)
                    )
                
                    .id(selectedText)
            }
            .background(
                DatePicker("", selection: $selectedDateLocal, in: closedRange, displayedComponents: [.date,.hourAndMinute])
                    .datePickerStyle(.graphical)
                    .frame(width: 400, height: 400)
                    .clipped()
                    .background(Color.yellow.opacity(0.1).cornerRadius(10))
                    .opacity(showPicker ? 1 : 0 )
                    .offset(x: 0, y: 230)
            ).onChange(of: selectedDateLocal) { newValue in
                
                let format = DateFormatter()
                format.timeStyle = .none
                format.dateStyle = .short
                
                print("Name changed to \(format.string(from: newValue))!")
                selectedText = format.string(from: newValue)
                withAnimation {
                    showPicker.toggle()
                }
            }
        }
    }
    
}

It was working excellent on test view (sorry image upload failure).

enter image description here

When it is placed on the real application, the background/overlay was behind of other views. enter image description here

I cannot change the Z-level since the UI a bit complicated.

How can we show the DatePicker displayed on background/overlay on top of everything as the DatePicker does? What is the proper way to do this?

kelalaka
  • 5,064
  • 5
  • 27
  • 44

0 Answers0