Firefox Nightly News

Let's improve quality, build after build!
Categories: Web Platform

Date/Time Inputs Enabled on Nightly

41 responses

Exciting! Firefox is now providing simple and chic interfaces for representing, setting and picking a time or date on Nightly. Various content attributes defined in the HTML standard, such as @step, @min, and @max, are implemented for finer-grained control over data values.

Take a closer look at this feature, and come join us in making it better with better browser compatibility!

What’s Currently Supported

<input type=time>

The default format is shown as below.

Here is how it looks when you are setting a value for a time. The value provided must be in the format “hh:mm[:ss[.mmm]]”, according to the spec.

Note that there is no picker for <input type=time>. We decided not to support it since we think it’s easier and faster to enter a time using the keyboard than selecting it from a picker. If you have a different opinion, let us know!

<input type=date>

The layout of an input field for date looks as below. If @value attribute is provided, it must be in the format “yyyy-mm-dd”, according to the spec.

A date picker will be popped out when you click on the input field. You can choose to set a date by typing in the field or selecting one from the picker.

      

Validation

Date/Time inputs allow you to set content attributes like @min, @max, @step or @required to specify the desired date/time range.

For example, you can set the @min and @max attribute for <input type=time>, and if the user selects a time outside of the specified range, a validation error message is shown to let the user know the expected range.

By setting the @step attribute, you can specify the expected date/time interval values. For example:

Localization

<input type=date> and <input type=time> input box are automatically formatted based on your browser locale, that means the Firefox browser with the language you downloaded and installed. This is the same as your interface language of Firefox.

This is how <input type=time> looks like using Firefox Traditional Chinese!

The calendar picker for <input type=date> is also formatted based on your browser language. Hence, the first day of the week can start on Monday or Sunday, depending on your browser language. Note that this is not configurable.

Only Gregorian calendar system is supported at the moment. All dates and times will be converted to ISO 8601 format, as specified in the spec, before being submitted to the web server.

Happy Hacking

Wondering how you can help us make this feature more awesome? Download the latest Firefox Nightly and give it a try.

Try it out:

Try it out:

If you are looking for more fun, you can try some more examples on MDN.

If you encounter an issue, report it by submitting the “summary” and “description” fields on Bugzilla.

If you are an enthusiastic developer and would like to contribute to the project, we have features that are in our backlog that you are welcome to contribute to! User interaction behaviors and visual styles are well defined in the specs.

Thanks,
The Date/Time Inputs Team

41 comments on “Date/Time Inputs Enabled on Nightly”

Post a comment

  1. Tomer Cohen wrote on

    Can you please make the screenshots above larger so it could be possible to actually read its content? It is also possible to link to the full image from the thumbnail.

    Reply

    1. Jessica Jong wrote on

      Done. Thanks for the feedback.

      Reply

      1. Nick wrote on

        Forgive the reply I cannot see a comment box. My mother couldn’t work out the time field and asked why were there no dropdowns?

        Reply

        1. Wesley wrote on

          We did have the picker UI designed but that has been triage as backlog item. We do not have clear roadmap plan regarding when that can be implemented to be honest.

          Reply

  2. Robert wrote on

    Many in EU and elsewhere will need to separate browser locale and specify lang manually by site. We often use generic/company browser/is but manually switch site to other lang

    Reply

    1. Jessica Jong wrote on

      I see. We haven’t thought about this kind of use case, will take this into account. Thanks for your feedback.

      Reply

  3. Jan wrote on

    What does browser language mean? I have general.useragent.locale set to en-GB but I still see the American format. Do I need to also have the language pack installed? It does not seem to be available for Nightly.

    Reply

    1. Jessica Jong wrote on

      Yes, I think you need to install the language pack. Try this: https://ftp.mozilla.org/pub/firefox/nightly/latest-mozilla-central-l10n/

      Reply

  4. Joakim wrote on

    Why not use formatting provided by operating system?
    I don’t know about Linux, but both macOS and Windows provide user configurable long and short formats for date and time. Windows also provides a user setting for first-day-of-week. I would appreciate if Firefox followed these settings.

    Reply

    1. Jessica Jong wrote on

      I was told by our Localization team that we do use OS preferences when OS language matches Firefox language. Please take a look at the UX discussion in bug 1366134 if that is not the case.

      Reply

  5. Josh wrote on

    Hooray! Good to see this is finally supported.

    I must admit the time picker’s UI is quite difficult to understand. In the example in the blog post, I was spending ages trying to enter the seconds when it turned out I was meant to type in AM or PM. That should be a selection.

    Reply

    1. Wesley wrote on

      Thanks for the feedback. It was by design since we expect most cases users don’t need to input seconds.
      “Seconds” field would show up when setting step to 0.1.

      Reply

    2. Devesh wrote on

      Same here. It wouldn’t let me fill in the last field because I thought it wanted me to enter seconds. Very confusing.

      Reply

  6. Fredrik wrote on

    Hooray! So happy to finally see this implemented. Was a bit worried that it wouldn’t have landed before Firefox 57…

    Reply

  7. Simon wrote on

    Is there any way to override the locale setting?

    I ask because while I’d rather not do so, we’re currently left with some inconsistency between form fields and other HTML content – forms will store in ISO format and render automatically in the correct locale, but that’s not true of dates appearing as text anywhere else on the page.

    And since most of us have long ago implemented our own ways of rendering the page text in a desired locale, it makes it difficult to use the new datetime inputs without risking inconsistency between the two… we can’t guarantee that the browser locale matches the one the server-side rendering code uses…

    Thoughts?

    Reply

    1. Hsin-Yi Tsai wrote on

      Thanks for the comment. We don’t provide a way to override the locale setting. We discussed this issue before and thought that the picker/input field is part of browser UI so we designed as the way it is. You may find our reason in brief here https://wiki.mozilla.org/TPE_DOM/Date_time_input_types (search “Determine locale for the date/time”).

      That being said, we’ve received several interests in the locale customized setting so far (thank you all!). We’ve offered the feedback back to our product team to re-consider the general locale design for our browser. Thanks again! 🙂

      Reply

  8. Albert wrote on

    This is awesome! I was playing around with it a little bit and like the UI. One thing which is a bit confusing is getting from the month/year selection back to the calendar view. I have learned now to clicking the grey “month/year dropdown” again, but it wasn’t intuitive for me.

    Also I am still struggling using it with the US sorting (mm/dd) 😛 – but I guess that will be changed later on.

    Kudos to everyone working on this 🙂

    Reply

  9. Justin wrote on

    We should let the user set the format separately from the language, but have the default based on the language. Also possibly a way for the site to override the timezone, &c. I also think that we might put arrows to click to change the value up and down and European date formats in addition to American ones.

    Reply

  10. Hans Henrik wrote on

    about time! Chrome has had type=date support since forever, i believe the same is true for Safari. however, due to shitty browser support, i have opted to use JqueryUI Datepicker all around.

    Reply

  11. Wellington Torrejais da Silva wrote on

    Awesome feature.
    My suggestion is a native calendar below the input like the most jQuery and JS implementations:
    https://www.tjvantoll.com/demos/2012-06-30/date

    Reply

    1. Wellington Torrejais da Silva wrote on

      Sorry, after wipe my profile data and create a new the picker now are displayed!

      🙂

      Reply

  12. Coach wrote on

    Using Deb 8.1 and Nightly 56. The date picker popup does not stay active long enough to use it. It only flashes quickly once and disappears. The widgets that should appear on the right edge of the input window are not visible. I tried with another browser and they work as intended, but look differently than illustrated.

    Reply

    1. Hsin-Yi Tsai wrote on

      Hi Coach, thanks for giving it a try!

      Would you mind filing a bug on bugzilla [1] by filling up the summary and description fields? It would be also huge help you attach a screenshot or video clip for us to quickly catch the issue you encountered. Thanks!

      [1] https://goo.gl/ggycti

      Reply

  13. Carl Krysa wrote on

    I use 24 hour format so 1 PM is 13:00:00 which you don’t support

    Reply

  14. Leo_sk wrote on

    How do i get firefox to display it in dd/mm/yyyy format? i am using en-GB version of nightly. Preferred languge is english uk.

    Reply

    1. Leo_sk wrote on

      i got i. works fine now

      Reply

  15. Ricardo Garcia Clemente wrote on

    I can see that works great…. but not …. how is the progress on that feature??

    Reply

  16. Ricardo Garcia Clemente wrote on

    I can see that “<input type=date>” works great…. but not “<input type=datetime-local>”…. how is the progress on that feature??

    Reply

  17. Jonathan Coles wrote on

    I tried your “Try it out” fields on the blog. In the time field, the time picker does not appear. Keyboard entry works OK.
    In the date field, the date picker appears only for the briefest instant as the mouse button is released. It is unusable. Keyboard entry is possible after clicking within the field just to the left or right of the “mm/dd/yyyy” text.
    I’m using Nightly 57.0a1 (2017-08-15) on Linux Mint 18.2 64-bit.
    I have not yet set up a bugzilla account.

    Reply

    1. Jessica Jong wrote on

      There is no picker for , please see the “What’s Currently Supported” above. 🙂
      I was able to reproduce your problem on Ubuntu + Gnome and filed Bug 1390794. Thanks for reporting!

      Reply

      1. -dsr- wrote on

        Click on the time widget. Type “135p”

        What I expect: either 1:35 PM or 13:05PM or 13:50PM.

        What I get: “1:05 –”

        Similarly, try “104” – results is “10:04” when it should be either 1:04 or 10:40.

        Reply

  18. Steven Secker wrote on

    Good to see support for date/time. However, the Latin ‘ante meridiem’ and ‘post meridiem’ shouldn’t be capitalised when abbreviated, so “am” and “pm” not “AM” and “PM”. Also as “am” is before noon (not noon) 12am is close to 0001, and as “pm” is after noon (not noon) 12pm is close to 2359. I’d like to see ordinal numbers available in date format too: it’s 19th October today, not 19 October or, worse still, October 19 (which was 1998 years ago)

    Reply

  19. Mattias Blom wrote on

    I am swedish and downloaded the fully localized version to try this out. Indeed it looked chic and very useful! But when i try to type in a date (ios8601 all the way yay!) then I get unexpected behavior. I tried the “normal” way and typed “20170101” expecting “2017-01-01” but instead the year part was set to 201701, 199 684 years in the future, and the result was left in a state like “201701-01-dd”. So I tried to actually type out the dashes (a reasonable workaround) but that didn’t work at all.

    I get that it’s “shortsighted” to assume year = 4 digits but in a practical setting, that would do for another ~8000 years! =)

    Reply

  20. Sergio Tobal wrote on

    I think the hour picker is useful, because that way you have limits of what the user can put in the input, if not the user maybe write 13:01:20 or 1PM : 1 : 20 or different things you don’t need to check if you have a hour picker and the user uses it

    Reply

  21. Fred wrote on

    When bootstrap datepicker is present, both ff datepicker and bootstrap datepicker are shown.
    Quite ugly.

    Reply

  22. Jaroslav wrote on

    Hello and thank you for your work!

    But please get date and time format from OS settings or make it at least configurable in the browser settings. Thank you.

    Reply

  23. Jaroslav wrote on

    Hello,

    I followed your decisions regarding different aspects of new features of date/time pickers (https://wiki.mozilla.org/TPE_DOM/Date_time_input_types) and must admit that decision was very very wrong: there are plenty of countries, which use english user interface but locale settings are absolutely different.

    From the wiki:
    —————————————-
    Mozilla team decisions for issue: “Determine locale for the date/time”
    Possible solutions: “Options: 1. Browser UI locale 2. User preferred locale”
    Mozilla team decision: “decision changed to (1). Reason: it’s part of the browser UI and as such it should stay consistent with browser similarly to how file opening UI, printing UI etc. stays. It interacts with the website, but it’s part of the application.”
    —————————————-

    Please not reinvent bicycle: there are locale setting in the OS, so, I assume that browser will be consistent with the whole OS but not with hardcoded locale in browser language pack (you really cannot provide language packs (and locale setting combinations) for every nation in the world).

    Thank you very much! And thank you for your great work to make great browser even better!

    Reply

    1. baptx wrote on

      By opening about:config and adding the preference intl.regional_prefs.use_os_locales set to true, it is possible to use an English version of Firefox and use the HTML input type=time with a 24-hour clock instead of AM/PM as well as a date like DD/MM/YYYY instead of MM/DD/YYY. It will follow the locale configured in your operating system. I heard about this option here: https://bugzilla.mozilla.org/show_bug.cgi?id=1425218#c11

      Reply

  24. Luizzz wrote on

    This is not working on Firefox 57. Seems to be another Firefox bug, right?

    Modernizr says TRUE in command bellow, so, yes, they have datetime-local support:

    Modernizr.inputtypes[‘datetime-local’]

    In about:options, datetime support is enabled.

    In this site, datetime-local is enabled on Firefox 57: https://caniuse.com/#search=datetime-local

    BUT, the datetime-local fields are not working at all.

    Reply

  25. RSWRC wrote on

    Please make the locale configurable. Thought i can ditch bootstrap datepickers, but with this setting i cant use it in our apps, which require a defined date format.

    Reply

  26. Peter wrote on

    How can I disable/hide this date picker if I don’t need it?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *