CODEWITHSUNDEEP
swiftswiftui
Darkisa
Darkisa

Reputation: 2037

SwiftUI 2.0 Change DatePicker background

Is there anyway to change the background color of the DatePicker view? I have the following Picker:

DatePicker(selection: $form.start, in: Date()..., displayedComponents: .date) {}
            .padding(.vertical, 6)
            .labelsHidden()
            .accentColor(.black)

But the picker has that grayish tint around the date (See image below). I just want the entire background to be white. I tried .background(Color.white) but that doesn't do anything. How can I make the entire background white?

enter image description here

Upvotes: 9

Views: 5354

Answers (4)

Kavindu Dissanayake
Kavindu Dissanayake

Reputation: 883

User Below code it work for me

    // MARK: Date Extension
    extension Date{
        func toString(_ format: String)->String{
            let formatter = DateFormatter()
            formatter.dateFormat = format
            return formatter.string(from: self)
        }
    }
    
   // Swiftui Code 
    
    struct DatePickerView: View {
    @State  var selectedDate = Date()
    let dateFormatter = DateFormatter()
    var body: some View {
        VStack(alignment: .leading){
            Text("Title")
            HStack {
                Text(selectedDate.toString("dd-mm-yyy"))
                    .bold()
                    .overlay {
                        DatePicker(
                            "",
                            selection: $selectedDate,
                            displayedComponents: .date
                        )
                        .blendMode(.destinationOver)
                    }
            }
            .padding(.horizontal,10)
            .padding(.vertical,10)
            .background(Color.gray.opacity(0.5))
            .cornerRadius(8)
           
        }
    }
}


struct DatePickerView_Previews: PreviewProvider {
    static var previews: some View {
        DatePickerView()
    }
}

Upvotes: 2

David Soares
David Soares

Reputation: 93

I don't agree with changing the default DatePicker, specially with this kind of 🔨, as you risk break future OS updates of it plus your/your designers vision of it is probably not as intuitive/accessible as Apple vision.

Still, if you are required to do it as I had to, here is how to do it while developing with a min target of iOS 14.

struct DatePickerView: View {
    @State private var selectedDate = Date()
    let dateFormatter = DateFormatter()

    var body: some View {
        HStack {
            Text(dateFormatter.string(from: selectedDate))
                .overlay {
                    DatePicker(
                        "",
                        selection: $selectedDate,
                        displayedComponents: .date
                    )
                    .blendMode(.destinationOver)
                }
        }
    }
}

Upvotes: 9

Asad Farooq
Asad Farooq

Reputation: 205

You can do this as follows:

dateTimePicker.setValue(UIColor.white, forKey: "backgroundColor")

enter image description here

Upvotes: 0

Stan
Stan

Reputation: 77

I discovered that you can do this by initialising it as follows:

init() {
 UIDatePicker.appearance().backgroundColor = UIColor.init(.white) // changes bg color
        UIDatePicker.appearance().tintColor = UIColor.init(.white) // changes font color
}

Upvotes: 3

Related Questions