feat: Add part to ion-datetime component to allow CSS customization

[iwoogy]

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

I would like to customize the CSS styles of the ion-datetime in a more precise way.

I read this article that explain how to access styles inside the shadow dom.
https://ionicframework.com/docs/theming/css-shadow-parts

I noticed that parts are not exposed in the ion-datetime

Describe the Use Case

I would like to implement that kind of styling

Describe Preferred Solution

Adding part attribtues to the shadow root children will help to access the styling of ion-datetime component

Describe Alternatives

No alternative for now.

Related Code

The code is pretty simple

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Could you help me understand which parts of ion-datetime you are unable to style?

Datetime has several CSS Variables that you can use as well as the color property to customize the overall theme of the component.

[iwoogy]

I would need for instance to change the style of the selectable dates

From the documentation, it seems like there are only 3 custom css properties available

[indraraj26]

Look like there are multiple event as per event, You want to apply background.

@iwoogy Is purple square selected one ?

[iwoogy]

The purple square is just an annotation.
This new legend will help understand the feature as the designer intended it.

[liamdebeasi]

We encourage developers to theme components in a way that matches the overall theme of their application. To this, you can generate a new custom color theme and use the color property to apply these styles. I used https://ionicframework.com/docs/theming/colors#new-color-creator to do this.

Here is an example: https://codepen.io/liamdebeasi/pen/YzYWBgV

The :root and .ion-color-custom classes are a bit involved, but the idea is that these styles are used across your entire application, not just for ion-datetime. From there, you can style ion-datetime specific styles in the ion-datetime selector block.

Can you try this and let me know if it works?

[iwoogy]

Thanks for your support.

It works to fulfill 50% of the designer requirements.

The today date and the selected date have to be the same color using the color attribute.
The disabled dates do not seem to be configurable.
The selectables dates styles cannot be changed.

Does the styling of the shadow parts could help allowing more control over the styling ?

Is it possible to hide the weekdays in order to have many ion-date components on the same page with only one weekdays header ?

[liamdebeasi]

Can you provide your use cases for these additional customizations? We intended for ion-datetime to match the native calendar picker components as closely as possible.

At the moment it is not possible to hide the weekdays on the datetime component.

[iwoogy]

Can you provide your use cases for these additional customizations? We intended for ion-datetime to match the native calendar picker components as closely as possible.

I'm in the process of converting a NativeScript into Ionic. I used to implement the graphic designer requirements in NativeScript in a custom calendar. I was wondering if the new component can help reproduce the same requirements.

At the moment it is not possible to hide the weekdays on the datetime component.

Ok. Noted.

[ckang777]

Hello @iwoogy. Looks like you closed this issue. Were you able to resolve this issue? If so how did you achieve this? I'm in the same boat and wanted a solution for this use case. Thanks.

[iwoogy]

Hello @ckang777

I didn't solve the issue. I negociated with the graphic designer to scale down the customisation ambition to fit the current constraint.

[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.