CODEWITHSUNDEEP
angularionic-frameworkdatepickerionic4
Acer79
Acer79

Reputation: 213

Ionic 4 ion-DatePicker customize color

I'm looking to see if I can change the datepicker colors in ionic 4 to another color with css.

Here is my code;

<ion-item>
    <ion-icon name="time"></ion-icon>
    <ion-label style="padding-left: 10px;">Pickup Time</ion-label>
    <ion-datetime class="picker-color" [value]="today" minuteValues="0,15,30,45" displayFormat="h:mm:a"></ion-datetime>
</ion-item>

Please see photo; I want to be able to change the color of the selection from Yellow to Red.

enter image description here

Upvotes: 1

Views: 2967

Answers (1)

Sergey Rudenko
Sergey Rudenko

Reputation: 9235

You could add style override inside your global.scss:

.picker-opt.picker-opt-selected, .picker-prefix, .picker-suffix {
    color: red;
}

.picker-button.sc-ion-picker-md, .picker-button.activated.sc-ion-picker-md {
    color: red;
}

If you need to override it only in this specific use case, you might need to add more selectors though

Upvotes: 2

Related Questions