UIDatePicker iOS 14 compact remove default background

Question

Created Aug ’20

Replies 11

Boosts 2

Views 11k

Participants 14

Hi,
I am trying update my application to iOS 14. I would like adopt new compact style.

Is it possible to remove background from the picker?

My picker is standart compact picker showing time and date. I can see rounded background under time and rounded background under date.

When I look to view hierarchy I see:

my UIDatePicker - this view has one subview I can see in debugger and I can access it by datePicker.subviews.first:
UIDatePickerIOSCompactView

Now I can see in view hierarchy the UIDatePickerIOSCompactView has two subviews - first is UIView containing label for time and second is UIView with label with date.
This two UIView has the background colors I want remove, but when I try to list subview for _UIDatePickerIOSCompactView, it returns empty array.

Is there any way how to remove background. Thank you.

Boost

Answer 1

Sneha_Bobhate07 OP

Sep ’20

I am having same issue. I want to change background color of UIDatePickerView, mode is compact. If I set white color then it does not reflect, but if I set red or any other color then it works. Could you please tell me how can I set white color?

0

Answer 2

jhoannarango OP

Sep ’20

I second that, it works with some colors such as red, but when I use white it won't change, it has that grey looking color that I want to get rid of, it does not go at all with the design of my app.

0

Answer 3

MtotheH OP

Sep ’20

Found a workaround by adding another subview to the incorrectly gray view:

Code Block swiftdatePicker.subviews.first?.subviews.forEach { grayView in
	let view = UIView()
	view.translatesAutoresizingMaskIntoConstraints = false
	view.backgroundColor = .white
	grayView.insertSubview(view, at: 0)
	view.topAnchor.constraint(equalTo: grayView.safeAreaLayoutGuide.topAnchor).isActive = true
	view.bottomAnchor.constraint(equalTo: grayView.safeAreaLayoutGuide.bottomAnchor).isActive = true
	view.leadingAnchor.constraint(equalTo: grayView.safeAreaLayoutGuide.leadingAnchor).isActive = true
	view.trailingAnchor.constraint(equalTo: grayView.safeAreaLayoutGuide.trailingAnchor).isActive = true
}

1

Answer 4

Wuffkatz OP

Sep ’20

I have exactly the same issue!
The background color will change with any color except .white.
If you choose:

Code Block swiftdatePicker.backgroundColor = .white

it still get's the grey background.

Additionally there is no way to align the date (text) in the field. Doesn't matter if you set it to left/right, it's always at the left side.

0

Answer 5

DariusValys OP

Sep ’20

i found only one solution how to remove background on .compact style:

datePicker.subviews[0].subviews[0].backgroundColor = nil

P.S. on OS darkMode toggle this color is reverted so is needed to change again

1

Answer 6

Killer_Nads OP

Oct ’20

Im using the wheel style date picker, none of the solutions sadly work to remove the selected row background. Hopefully someone can help solve this soon?

0

Answer 7

grep OP

Oct ’20

Same issue here

0

Answer 8

mqazwini OP

Dec ’20

It's not that it doesn't change color when the background color is white. There is a low-opacity overlay that will be above any color you put. When you choose red or any other color, the overlay is still there, and the color appears darker, but you do not notice it as much. When you set the background color to white, the overlay is very noticeable. The only way to fix this as of right now is to make the background color of the overlay view .clear.

Code Block if let bgView = datePicker.subviews.first?.subviews.first?.subviews.first {
    bgView.backgroundColor = .clear
}

But you will have to run this every time the user changes their appearance.

1

Answer 9

Claude31 OP

Dec ’20

I found this thread with useful information: set with keypath.
https://stackoverflow.com/questions/29220535/changing-text-color-of-datepicker

such as (if there is a key path for the background)
datePicker.setValue(UIColor.red, forKeyPath: "textColor")

Hope that helps.

0

Answer 10

DannyJohnLaw OP

Mar ’21

This removes the gray background for me on a compact style date picker:

Code Block datePicker.subviews[0].subviews[0].subviews[0].alpha = 0

1

Answer 11

NastassiaRodzik OP

Apr ’21

Key value coding worked for me:

Code Block datePicker.setValue(UIColor.white, forKey: "backgroundColor")

1