Seconds column not showing in time picker (ionic v6)

[klehtinen]

Hi!

I’m trying to display hours, minutes and seconds (HH:mm:ss) using ion-datetime time picker, but the seconds (ss) column is missing.

Here is the code, I tried in two different ways

<div class="grid-item">
    <h2>Time 1</h2>
    <ion-datetime
        locale="fi-FI"
        presentation="time"
        value="00:00:00" 
        display-format="HH:mm:ss" 
        picker-format="HH:mm:ss">
      </ion-datetime>
</div>
<div class="grid-item">
    <h2>Time 2</h2>
    <ion-datetime
        locale="fi-FI"
        presentation="time"
        value="00:00:00" 
        displayFormat="HH:mm:ss" 
        pickerFormat="HH:mm:ss">
      </ion-datetime>
</div>

Here’s what it looks like

[mirko77]

Same issue here and no one replies… @mhartington, @ldebeasi ?

<ion-datetime
id="datetime"
presentation="time"
value="13:47:20"
></ion-datetime>

seconds do not show

[ldebeasi]

ion-datetime in Ionic 6 does not have the seconds column. This was done to align with the native pickers on iOS and Android that do not have the seconds column either.

It is also worth noting that the <input type="datetime-local" /> picker built into the browser does not have a seconds selection either: <input type="datetime-local"> - HTML: HyperText Markup Language | MDN

[ldebeasi]

Also, the displayFormat and pickerFormat properties do not exist in Ionic 6 anymore as the component is displayed inline. See Upgrading to Ionic 6 | Ionic Documentation for more information.

[mirko77]

Thanks for your reply.
Basically, by upgrading to Ionic 6 (from 5) we lose the ability to set the seconds, something our app has been featuring for the past 5 years. Not cool, considering your docs state the opposite:

Hour, Minute, Second HH:mm:ss 13:47:20

Moreover , <input type="datetime-local" /> does support seconds in basically all browsers by setting step=“1” as attribute, like the <input type="time">, see below

Finally, here is the feedback we get from our users when entering the time on our app built with Ionic 6 (we can only agree with them)

• It would be better if numbers would be a bit larger, so it would be easier to set values (it happened several times that the accidentally wrong column was turned why I tried to change the time in the neighboring column).
• Please enable to be able to continue scrolling from largest number further to 0 (e.g. from 59 seconds directly to 0, 1,…), so it could be adjusted more quickly in either direction.
• It would be better if rolling of the numbers would be faster - now there is sometimes a bit too much of a lag and when you move on the next column the numbers in the previous one still keep rolling for more then what you intended.

[ldebeasi]

The seconds reference in our docs is more to detail how to use the ISO 8601 format than it is an indication of support in ion-datetime. However, I think we could be more explicit about our support for seconds so I can update the docs.

Moreover , <input type="datetime-local" /> does support seconds in basically all browsers by setting step=“1” as attribute, like the <input type="time"> , see below

Thanks for clarifying! I had forgotten about the step attribute. You are correct, seconds selection is supported with datetime-local.

---

At the moment we do not have plans to add seconds support back in. The feedback we got previously was that it was not often used. Like I mentioned before, the native pickers on iOS and Android do not allow for seconds selection (the ones in native apps, not the <input> picker) so we decided to align with that pattern.

If seconds selection is important for your use case, I recommend filing feedback on our GitHub repo.

[ldebeasi]

The docs have been updated to clarify second/millisecond support with ion-datetime: ion-datetime: Ionic API Input for Datetime Format Picker

[mirko77]

Thank you for your attention.

We also tried the <ion-picker> to build a custom hh:mm:ss but the performance on low-mid Android devices is too bad for production, and there is a weird haptic feedback on scroll we cannot get rid of…

Currently trying this → WheelSelector Plugin | Ionic Documentation and it looks like it works like a charm, at least on Android. On iOS, we can still use the <ion-picker>.