how to custom DatePicker Label

Question

Created 1w

Replies 1

Boosts 0

Participants 2

I have a custom UI to display date (for user birthday) and want if the user presses each part of the label , the date selection is displayed, the current issue is , when I try to reduce the DatePicker opacity or set the colorMultipli to clear color, it still clickable on the date area, while my object is a fullWidth object, how can I fix it?

This is the code:

 VStack(alignment: .leading, spacing: 8) {
                Text("Birthday")
                    .font(.SFProText.font(type: .medium, size: 13))
                    .foregroundStyle(Color(uiColor: .label))
                
                HStack(alignment: .center) {
                    Text(userProfileAccountInfoviewModel.birthday.getShortFormat(format: "dd MMM yyyy"))
                        .font(.SFProText.font(type: .medium, size: 13))
                        .foregroundColor(Color(uiColor: .label))
                        .padding(.horizontal, 13)
                    
                    Spacer()
                }
                .frame(height: 44)
                
                .contentShape(Rectangle())
                .overlay {
                    HStack {
                        
                        DatePicker(selection: $userProfileAccountInfoviewModel.birthday, displayedComponents: .date) {}
                            .labelsHidden()
                            .colorMultiply(.clear)
                            .background(Color.clear)
                            .foregroundStyle(Color.baseBackgroundSecondary)
                            .frame(maxWidth: .infinity)
                            .contentShape(Rectangle())
                          //  .opacity(0.011)
                        
                        Spacer()
                    }
                    
                }
                .background(Color.baseBackgroundSecondary)
                .clipShape(RoundedRectangle(cornerRadius: 4))
                
            }

Boost

Answer 1

darkpaw OP

1w

Sorry, I don't really understand your question.

To run your code I have to use a simple @State variable in place of your userProfileAccountInfoviewModel which wasn't provided, and probably isn't necessary to provide), and I don't know what Color.baseBackgroundSecondary is, so if these are required to reproduce your issue you'll have to provide them.

I can show the DatePicker when I click to the right of the displayed date (because you're using the .colorMultiply(.clear) hack).

If I change the line .background(Color.clear) to use a blue colour instead, I can see that the DatePicker is clickable in that blue rectangle:

Why would you want to set the opacity to 0.011? That's just over 1% opacity and is practically transparent. This is what it looks like with that blue colour at 0.011:

Can you explain a little more clearly what you want to achieve?

0