Originally published at: The new Datetime component in Ionic - Ionic Blog
What’s that? There’s a new Datetime component in Ionic? Well, not entirely, but given the massive overhaul it went through, you wouldn’t be mistaken for thinking that. With version 6.0.0 of Ionic, we spent a lot of time updating the Datetime component based on feedback from the community. We also updated the component’s design to…
3 Likes
Thanks, very useful. Been a hassle to get the same behavior on ionic 6 after upgrading from 5. This guide is useful and should be added to the official docs imho.
1 Like
How do we show the seconds in the new <ion-datetime> component?
I have published a blog article for all possible ways to use ionic datetime picker.
Is there a way to use datetime-button and datetime the same way as they are used in the native Calendar app where each button opens either a date or a time picker accordingly as accordion?
I don’t see an example for the date-time-button to show only a date button.
If you do this, only the date button will show for IonDatetimeButton.
<ion-datetime id="datetime" presentation="date"></ion-datetime>
1 Like
Thanks, it helped. It seems a little counter intuitive, setting the prop on another element in order to change the button and I couldn’t find an example on the button page.
Now I struggle with another problem. The button has a dark gray color, and I can not change it for the life of it. color=“primary” and so on. Css on the shadow elements is impossible. The element is inside an ion-item. setting color on the ion-datetime changes the color of the selected date at least.
Using the color prop on the IonDatetimeButton does seem janky. For me, it only applied upon click while the modal was open.
You can do this though with the following CSS. A working example here DateTime Button w/ Date only and custom button color - StackBlitz
ion-datetime-button::part(native) {
background-color: red;
color: white;
}
2 Likes
Unbelievable man. 
Thank you so much.
1 Like