The New Datetime component in Ionic

Ionic Framework
1

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
2

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
3

How do we show the seconds in the new <ion-datetime> component?

4

I have published a blog article for all possible ways to use ionic datetime picker.

5

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?

6

I don’t see an example for the date-time-button to show only a date button.

8

If you do this, only the date button will show for IonDatetimeButton.

<ion-datetime id="datetime" presentation="date"></ion-datetime>
1 Like
9

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.

10

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
11

Unbelievable man. :partying_face:
Thank you so much.

1 Like
12

The removal of the Seconds was a pretty bad choice, it would be nice to have an option to add them for Duration purposes, and behave “native” without them. But being unable to add seconds makes this control useless for many applications.