feat: datetime, expose wheel for styling

[mikeangeloo]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Hello team currently I had been working with the ion-datetime and have a lot of amazing things. It will be very useful If we can modify the styling of the ion-picker-internal, because is not meet the default font defined at global styles, we can change the Theme colors and background but no the size of the font, font-weight, font-size, font-family.

Describe the Use Case

This feature will help to customize and meet the UI look & feel of each individual personalization.

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

<ion-datetime
    presentation="date"
    [preferWheel]="true"
>
</ion-datetime>

on styles.scss

ion-datetime {
    color: #1a475f;
    font-weight: 700;
    --background: white;
    --ion-color-base: #1a475f !important;
    --ion-color-step-150: #eef5fa;
}

The result:

The expected result:

Additional Information

This element should be customizable or have ::part element to get into it

• picker-item
• picker-item-active
• <div class="picker-before"></div>
• <div class="picker-after"></div>
• <div class="picker-highlight"></div>

[sjdrew]

I agree with this also. In fact the picker highlight in MD mode is never used and we our finding users do not know which row is the highlight as not enough contrast difference.

In this example many users think the black text is the selected not the green text (primary color). IOS version is fine as you highlight the row.

Also mode="ios" does not work either to force ios mode on the ion-datetime (has no effect on the popover).

[thalisvilela]

+1. In testing with some users, they found difficult to know which row is selected.

[ogaguinaga]

Are there any news on this issue? how do you change the ion-datetime component wheel styles?

[loyaj]

I'm in the same boat. Since ion-picker is a scoped component, I've been able to adjust the styles for standalone pickers. But I also need to be able to style the pickers that are part of ion-datetime, which is a shadow component.

[averyjohnston]

Features to style the wheel pickers have been added via #27529 and will be available in an upcoming minor release of Ionic. Thank you!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.