ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

bug: Can't set the active wheel item text color for ion-datetime

Open pjc2007 opened this issue 1 week ago • 0 comments

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

I am trying to set the text color of the ion-datetime current time item,

Looking at the documentation, I should be able to use the ::part(wheel-item active) to do this. In the linked example, I have set this to red, whoever, it is not being applied.

I have the following in global.scss

ion-datetime::part(wheel-item active) {
  color: red !important;  
}
Image

Expected Behavior

I would like to be able set the highlight color of the selected time item

Steps to Reproduce

  1. Get the sample at https://github.com/pjc2007/date-time-issue
  2. Click SHOW DATE TIME PICKER
Image
  1. Click on the time
Image
  1. Click in the time picker
Image

The red as set in global.sccs is not being applied.

Code Reproduction URL

https://github.com/pjc2007/date-time-issue

Ionic Info

$ ionic info [WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

   Require stack:
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'

   Require stack:
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:

Ionic CLI : 7.2.1 (C:\Users\Peter\AppData\Roaming\npm\node_modules@ionic\cli) Ionic Framework : @ionic/angular 8.7.5 @angular-devkit/build-angular : 20.3.4 @angular-devkit/schematics : 20.3.4 @angular/cli : 20.3.4 @ionic/angular-toolkit : 12.3.0

Capacitor:

Capacitor CLI : 7.4.3 @capacitor/android : not installed @capacitor/core : 7.4.3 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v22.17.1 (C:\Program Files\nodejs\node.exe) npm : 10.9.2 OS : Windows 10

Additional Information

Not sure if this is affected due to being inside a modal?

pjc2007 avatar Dec 04 '25 06:12 pjc2007