iosswiftiphoneswiftuidatepicker

How to increase tappable area of DatePicker in SwiftUI


I am creating a custom date picker using swiftUI with a placeHolder text.However, datepicker is popping only if I tap on text .I want it to pop whenever I tap on entire white background

enter image description here

I tried using .compositeGroup, .scaleEffect, but nothing seems to be working.the tap area is not increasing.I am attaching my code. I want the datepicker to popup whenever I tap on the entire white background as in attached image

ZStack {
    Rectangle()
        .foregroundColor(.whiteGeneric)
        .frame(height: 50)
        .cornerRadius(25)

    HStack(spacing: 10) {
        Image(.calendar)
            .resizable()
            .frame(width: 21, height: 21)
            .padding(.leading, 25)

        DatePicker("", selection: $selectedDate, displayedComponents: .date)
            .labelsHidden()
            .overlay {
                ZStack {
                    Color.white

                    Text(selectedDate == Calendar.current.date(from: DateComponents(year: 2020, month: 1, day: 1))! ? "Date of Incident" : getdateFormatter(with: "MM/dd/yyyy").string(from: selectedDate))
                        .font(AppFont.robotoRegular.size(15))
                        .foregroundStyle(.primaryText)
                        .lineLimit(1)
                        .minimumScaleFactor(0.5)
                }
                .allowsHitTesting(false)
            }

        Spacer()
    }
}

Solution

  • What is needed is a way to increase the footprint of the default date picker.

    ZStack(alignment: .leading) {
        Color.whiteGeneric
    
        HStack(spacing: 10) {
            Image(.calendar)
                .resizable()
                .frame(width: 21, height: 21)
    
            Text(selectedDate == Calendar.current.date(from: DateComponents(year: 2020, month: 1, day: 1))! ? "Date of Incident" : getdateFormatter(with: "MM/dd/yyyy").string(from: selectedDate))
                .font(AppFont.robotoRegular.size(15))
                .foregroundStyle(.primaryText)
                .lineLimit(1)
                .minimumScaleFactor(0.5)
        }
        .padding(.leading, 25)
    }
    .frame(height: 50)
    .allowsHitTesting(false)
    .background {
        DatePicker("", selection: $selectedDate, displayedComponents: .date)
            .labelsHidden()
            .scaleEffect(x: 5, y: 1)
    }
    .clipShape(Capsule())
    

    Animation