1498787 - input type="datetime", type="datetime-local" and type="time" does not allow changing of seconds, even if the "step" attribute is set

Status: RESOLVED FIXED

(Firefox for Android Graveyard :: General, defect)

Description

[Rob Wu [:robwu]]

Android supports a native date picker for <input type="datetime-local"> and <input type="datetime">, which allows users to change the day, month, year and hours + minutes.

The default UI only includes minutes, and that is correct because the default step is 60 seconds (one minute):

> The step attribute is expressed in seconds. The step scale factor is 1000 
> (which converts the seconds to milliseconds, as used in the other algorithms). 
> The default step is 60 seconds.

Source: https://html.spec.whatwg.org/multipage/input.html#local-date-and-time-state-%28type%3Ddatetime-local%29

When I add a "step" attribute, then I expect an extra "seconds" field. But it does not appear on datetime inputs (only on Android; Firefox does not even support datetime inputs).

On <input type="time">, I see the expected seconds field, but upon tapping the input, I get a date picker without seconds. On Firefox desktop, the seconds can be edited.

Test cases (tested with Firefox Nightly 64 on Android Nougat):
Bad (no seconds field):
data:text/html,<input type=datetime-local step=1>
data:text/html,<input type=datetime step=1>

Bad (the input field itself does show a --:--:-- instead of --:-- as expected, but the date picker does not offer a way to set seconds):
data:text/html,<input type=time step=1>

Good (seconds field not expected due to default step=60)
data:text/html,<input type=datetime-local>
data:text/html,<input type=datetime>
data:text/html,<input type=time>


The step attribute is supported for these inputs (bug 1310080), but the UI is missing.

Comment 1

[Rob Wu [:robwu]]

I'm going to fix this for Fennec.
GeckoView also has this issue, but it needs a separate patch (and I'll probably not be authoring that).

I'll attach patches that add a spinner for seconds, for datetime-local and time only.
datetime-local / time also support milliseconds, but I won't add UI for it since the use cases are probably very limited, and not warranting more screen estate.

datetime inputs are not supported (bug 888328) and I will remove the remains of its UI in a patch for bug 1005268.

Comment 2

[Rob Wu [:robwu]]

Attachment: Bug 1498787 - Support seconds in datetime-local inputs

The "seconds" field is now supported for type="datetime-local".

Examples, tested on Android Nougat (7.0):

```
No seconds because step is a whole minute:
data:text/html,<input type="datetime-local" step="60">

No seconds because datetime is not a supported type (it is treated like
input type=text by the DOM, but somehow a datepicker still appears):
data:text/html,<input type="datetime" step="0">

Seconds because step is a second:
data:text/html,<input type="datetime-local" step="1">
```

The UI looks only slightly different: After "HH mm" there is now a "ss"
spinner, optionally followed by AM/PM.

Comment 3

[Rob Wu [:robwu]]

Attachment: Bug 1498787 - Support seconds in time inputs

When a time input expects seconds, e.g. via `<input type=time step=1>`,
then the UI should show a way to input seconds.

On Nougat, `data:text/html,<input type=time step=1>`,
the UI used to show a clock to select hours and minutes.
As of this commit, three spinners are shown (HH mm ss),
and if 24-hour mode is disabled, four of them (HH mm ss AM).

Depends on D8667

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d530c99c2be5
Support seconds in datetime-local inputs r=jchen
https://hg.mozilla.org/integration/autoland/rev/12fcdbe6ef8d
Support seconds in time inputs r=jchen

Comment 5

[Rob Wu [:robwu]]

r+ yet has not been mirrorred from Phabricator yet, but the above patches have been approved.

Green try (together with patch for bug 1005268): https://treeherder.mozilla.org/#/jobs?repo=try&revision=f6bc7b205e87d171656f1886c87b5c721d6474be

Comment 6

[Stefan Hindli [:stefan_hindli]]

https://hg.mozilla.org/mozilla-central/rev/d530c99c2be5
https://hg.mozilla.org/mozilla-central/rev/12fcdbe6ef8d