Ionic 4 - How to set the color of ion-datetime value

Ionic Framework
1

This is how to change the text color on inputs (note the color directive):

<ion-item class="ion-text-end">
	<ion-label class="ion-text-end">Name</ion-label>
	<ion-input type="text" inputmode="text" placeholder="Text" color="primary"></ion-input>
</ion-item>

But doing similar for ion-datetime doesn’t seem to work, i.e. the colour is always black:

<ion-item>
	<ion-label>Date of Birth</ion-label>
	<ion-datetime value="1990-02-19" placeholder="dd/mm/yyyy" color="primary"></ion-datetime>
</ion-item>

I can force the color change by adding a css rule to global.scss like:

ion-datetime { color: var(--ion-color-primary) !important; }

But it means the color is always solid. There doesn’t look to be a “has-value” class on ion-datetime that I can use to toggle 0.25 opacity value required when no value is present.

Anyone got any ideas how I could get color to work on ion-datetime?

2

Hi @MarkL!
Copy and paste it inside your global.scss file.

.picker-wrapper.sc-ion-picker-ios {
    color: var(--ion-color-dark);
    background: var(--ion-color-danger);
    --background: var(--ion-color-dark);
    border-top: 0.5px solid var(--ion-color-danger);
}

.picker-ios .picker-prefix,
.picker-ios .picker-suffix,
.picker-ios .picker-opt.picker-opt-selected {
    border-radius: 10px;
    font-family: Montserrat-bold;
    color: var(--ion-color-dark);
}

.picker-ios .picker-opt {
    color: var(--ion-color-dark);
    font-family: Montserrat-bold;  
}

.picker-ios .picker-button,
.picker-ios .picker-button.activated {
    color: var(--ion-color-danger);
    font-family: Montserrat-bold;
    --background: var(--ion-color-dark);
    background: var(--ion-color-dark);    
}

.picker-toolbar.sc-ion-picker-ios {
    background: var(--ion-color-dark);
    border-bottom: 0px solid transparent;
    border-top: 0.5px solid var(--ion-color-danger);
}

Hope it may helps.

3

I have done it like so: css - Change color of ion-datetime value - Stack Overflow