html.elements.input.type_datetime-local - Time picker not shown

[pizzi80]

What type of issue is this?

Browser bug (a bug with a feature that may impact site compatibility)

What information was incorrect, unhelpful, or incomplete?

Firefox in not compatible with

input type="datetime-local"

My User Agent is

Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/119.0

What browsers does this problem apply to, if applicable?

Firefox

What did you expect to see?

A calendar plus a time of the day chooser like in other browsers, for example in Chrome
it's implemented in this way:

Did you test this? If so, how?

Yes, many times, from 3 or 4 years now...

TO REPRODUCE

Go to: https://developer.mozilla.org/en-US/play

Paste the following html code:

<form>
  <label for="party">Enter a date and time for your party booking:</label>
  <input id="party" type="datetime-local" name="partydate" />
</form>

and you will see that is not possible to choose date and time for the input
because there is not Time Chooser!

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

https://bugzilla.mozilla.org/show_bug.cgi?id=1726108

Do you have anything more you want to share?

A lot of devs and users are waiting from many years that Firefox fill this gap with other browsers!

Due to this bug Firefox is still not usable as a main browser
... people will continue to use Chrome, Safari or Edge instead of switching to Firefox ...

MDN URL

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

MDN metadata

MDN page report details

• Query: html.elements.input.type_datetime-local
• Report started: 2023-10-27T08:25:55.813Z

[lukewarlow]

This imo isn't a compat data issue, Mozilla has just chosen not to make a picker UI for the time aspect (neither have Apple in Safari). They both fully recognise the input type and provide UI to edit the full value (just typing in the input itself).

[pizzi80]

Mozilla has just chosen not to make a picker UI for the time aspect (neither have Apple in Safari)

Imo it's a bad choice and I wouldn't consider Safari an exemplary browser...

Overall is at best a "partial support":

1. as an end User I do not consider this a supported feature in Firefox,
   because it's not the same user experience I have on Firefox for Android ...

2. as a Developer it would be useful to know if a browser fully support the input
   because I had to know in advance if I can count on this input type or if I have to
   integrate an external library like for example ( https://flatpickr.js.org/ )

If you are interacting with the browser only with the mouse
you cannot correctly fill in the input,
which you can do with an <input type="number" /> or an <input type="color" />

Firefox has the same problem also with the <input type="time" />

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time

From a User experience perspective the input <input type="datetime-local" />
it's the worst case because the user see an alternative to the keyboard
by clicking on the icon associated with the input but
the field it's not valid after he has clicked on same value

try to add the "required" attribute to the input and the html5 validation fails...

<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    </label>
    <input
      id="party"
      type="datetime-local"
      name="partydate"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Book party!" />
  </div>
</form>

If Firefox is comfortable with this situation I suggest to remove
the date picker (calendar) from this input
forcing the user to enter the value with the keyboard

[queengooborg]

Duplicate of #16138.