/blog/posts/20220107-DatePickerPopupInIonic6.html

[damirarh]

Imported

URL: https://www.damirscorner.com/blog/posts/20220107-DatePickerPopupInIonic6.html

[damirarh]

Imported comment written by Lalji Gami on 2022-03-24T11:49:50

Hi Damir

Thank you so much for your info - very useful and saved me lot of time.

One question... do you know if there is any documentation on what CSS variables/selectors can be set for the ion-datetime component. The ionic documentation only mentions three (--background, --background-rgb, --title-color).
I'm trying to style the default buttons to align with rest of my app buttons but I can't find a way of doing this. I can't even get the default buttons text to be in lower case even when I set doneText="Done" cancelText="Cancel" the modal shows all capitals.

Lalji

[damirarh]

Imported comment written by Damir Arh on 2022-03-27T14:08:11

I don't know of any documentation beyond the official one here. I can't find a way to customize the appearance of default buttons either.

To work around this limitation, you could provide your own buttons in the buttons slot:


<div slot="buttons">
<ion-buttons class="my-buttons">
<ion-button>Cancel</ion-button>
<ion-button>Done</ion-button>
</ion-buttons>
</div>


This will allow you to apply custom styles to buttons. For example, the following will prevent the text from being all caps on Android:


.my-buttons {
ion-button {
text-transform: none;
}
}


I described this approach in more detail in a separate blog post.

[damirarh]

Imported comment written by Lalji Gami on 2022-03-27T19:58:20

Exactly what I have done. I
Now I have another problem in that when user clicks the Month/Year selection ( top left) the month/year picker wheel correctly appears but the main buttons are also visible and enabled. The users instinctively press the done button thinking that’s to select the month/year and return back to select a day for that month but instead the datetime picker closes.

[damirarh]

Imported comment written by Damir Arh on 2022-04-01T14:22:37

I don't know of a way to change this. The component seems to be designed that way on purpose.

[damirarh]

Imported comment written by Hanno Coetzer on 2022-09-15T12:39:22

Was very helpful and informative. Thank you so much!

as a suggestion change the variable date to something else like 'myDate' and the popover trigger to 'popTrigger' so that it is easier to differentiate what is variables and what is type keywords.

Thanks

[sandeeppds]

Hello Damirarh, I am using I am facing an issue with timepicker. I would like to hide dialpad/kayboard when user click on the time (preferWheel)

[sandeeppds]

Hello Damirarh, I am using ion-datetime with this option presentation is time. As per my client requirement I would like to hide dialpad/kayboard when user click on the time (preferWheel).

[sandeeppds]

Ionic7 Im using