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