How to change Ion-Datetime-Button background color

Ionic Framework
1

Hi,

I’m running ionic 6 on a mac, and I have implemented the ion-datetime-button , with a modal and everything is working fine , except that I can’t change the background button of the datetime button, unfortunately the official docs says there’s no custom css background for this component , wondering if there is any work around I can apply to achieve my goals?

2

Check https://ionicframework.com/docs/api/datetime-button#css-shadow-parts you can use the shadow part to style it. Learn about shadow parts here: https://ionicframework.com/docs/theming/css-shadow-parts

Based on the docs, the datetime-button has a shadow part called “native” so for example this worked for me:

ion-datetime-button::part(native) {
    background: #FFF;
}

I added that to in my Vue component.

2 Likes
3

Thank you very much, this worked for me