Skip to content
This repository was archived by the owner on Apr 14, 2021. It is now read-only.

Isomorphic time format issue #109

Closed
Ekhoo opened this issue Jun 18, 2015 · 18 comments · Fixed by #110
Closed

Isomorphic time format issue #109

Ekhoo opened this issue Jun 18, 2015 · 18 comments · Fixed by #110

Comments

@Ekhoo
Copy link

Ekhoo commented Jun 18, 2015

I use react-intl and we have a time format issue with the polyfill version.

See => here

(Using react-intl, polyfill on server, native on client)
With the fr-FR locale, I have a format issue with the <FormattedTime /> component.

If I have a date like this one: 2015-06-17T06:00:00+0000:
Server rendering => 8:00
Client rendering => 08:00

I use this format:

    var formats = {
        time: {
            hhmm: {
                hour: 'numeric',
                minute: 'numeric'
            }
        }
    };
@danieljuhl
Copy link

Isn't it the clients native implementation which is wrong? Which client are you testing on?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat

Valid values is numeric and 2-digit, I would then assume that numeric for hour should produce 8 and 2-digit should produce 08

@andyearnshaw
Copy link
Owner

@danieljuhl, the options passed are merely hints at the format you want. Ultimately it depends on the pattern that is resolved from the locale data.

Upon investigation, it appears this is a pretty complicated issue and perhaps even a spec issue. The spec defines internal descriptors for patterns that look like this:

{
    "hour": "numeric",
    "minute": "2-digit",
    "pattern": "{hour}:{minute}",
    "pattern12": "{hour}:{minute} {ampm}"
}

CLDR data is precompiled to this format for the polyfill to reduce complexity in the production code, optimising speed of formatting and keeping the library code small. In the CLDR data, 24-hour and 12-hour patterns are described separately:

"hm": "h:mm a",
"Hm": "HH:mm",

This is from en-GB.json. The CLDR specifies that, for this locale (and most other locales with latin numbers), 12-hour time formats don't have zero-padding but 24-hour time formats do. The internal object specified by ECMA-402 define the individual components be either 'numeric' or '2-digit', and this should apply to both the 12-hour pattern and the 24-hour pattern. Chrome and Firefox clearly don't do this, not sure about others, but they don't create these internal objects (they just format using the CLDR patterns).

I'm not sure how we should deal with this in the short term. Our options look like this:

  • Include both patterns from the CLDR. This would result in supporting 'numeric' and '2-digit' for both 12- and 24-hour formatting, which is against locale conventions. Not a good idea, in my opinion.
  • Ask for a fix in the spec. Could be waiting a while.
  • Try and copy what Chrome and Firefox do. Requires Switch to using the raw CLDR data #77 to be done, taking a performance hit on formatting but increasing the number of patterns we support.

/cc @caridy @kate2753

@caridy
Copy link
Collaborator

caridy commented Jun 18, 2015

@andyearnshaw yes, I did a similar research yesterday for #108, and found that in deed, CLDR data covers only a subset of what browsers implements today. In the case of en-GB, these are all CLDR patterns we are producing internally to match the specs:

[ { weekday: 'short', pattern: '{weekday}' },
  { weekday: 'short', day: 'numeric', pattern: '{weekday} {day}' },
  { weekday: 'short',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{weekday} {hour}:{minute}',
    pattern12: '{weekday} {hour}:{minute} {ampm}' },
  { weekday: 'short',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{weekday} {hour}:{minute}:{second}',
    pattern12: '{weekday} {hour}:{minute}:{second} {ampm}' },
  { year: 'numeric', era: 'short', pattern: '{year} {era}' },
  { month: 'short',
    year: 'numeric',
    era: 'short',
    pattern: '{month} {year} {era}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    era: 'short',
    pattern: '{weekday} {day} {month} {year} {era}' },
  { day: 'numeric',
    month: 'short',
    year: 'numeric',
    era: 'short',
    pattern: '{day} {month} {year} {era}' },
  { month: 'numeric', pattern: '{month}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'numeric',
    pattern: '{weekday} {day}/{month}' },
  { month: 'short', pattern: '{month}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'short',
    pattern: '{weekday} {day} {month}' },
  { day: 'numeric', month: 'short', pattern: '{day} {month}' },
  { day: 'numeric', month: 'numeric', pattern: '{day}/{month}' },
  { day: 'numeric', pattern: '{day}' },
  { hour: 'numeric',
    pattern: '{hour}',
    pattern12: '{hour} {ampm}' },
  { hour: 'numeric',
    minute: '2-digit',
    pattern: '{hour}:{minute}',
    pattern12: '{hour}:{minute} {ampm}' },
  { hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{hour}:{minute}:{second}',
    pattern12: '{hour}:{minute}:{second} {ampm}' },
  { minute: '2-digit',
    second: '2-digit',
    pattern: '{minute}:{second}' },
  { year: 'numeric', pattern: '{year}' },
  { month: 'numeric', year: 'numeric', pattern: '{month}/{year}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'numeric',
    year: 'numeric',
    pattern: '{weekday} {day}/{month}/{year}' },
  { month: 'short', year: 'numeric', pattern: '{month} {year}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    pattern: '{weekday} {day} {month} {year}' },
  { month: 'long', year: 'numeric', pattern: '{month} {year}' },
  { day: 'numeric',
    month: 'short',
    year: 'numeric',
    pattern: '{day} {month} {year}' },
  { day: 'numeric',
    month: 'numeric',
    year: 'numeric',
    pattern: '{day}/{month}/{year}' },
  { weekday: 'short',
    hour: 'numeric',
    pattern: '{weekday} {hour}',
    pattern12: '{weekday} {hour} {ampm}' },
  { weekday: 'short',
    day: 'numeric',
    hour: 'numeric',
    pattern: '{weekday} {day} {hour}',
    pattern12: '{weekday} {day} {hour} {ampm}' },
  { year: 'numeric',
    era: 'short',
    hour: 'numeric',
    pattern: '{year} {era} {hour}',
    pattern12: '{year} {era} {hour} {ampm}' },
  { month: 'short',
    year: 'numeric',
    era: 'short',
    hour: 'numeric',
    pattern: '{month} {year} {era} {hour}',
    pattern12: '{month} {year} {era} {hour} {ampm}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    era: 'short',
    hour: 'numeric',
    pattern: '{weekday} {day} {month} {year} {era} {hour}',
    pattern12: '{weekday} {day} {month} {year} {era} {hour} {ampm}' },
  { day: 'numeric',
    month: 'short',
    year: 'numeric',
    era: 'short',
    hour: 'numeric',
    pattern: '{day} {month} {year} {era} {hour}',
    pattern12: '{day} {month} {year} {era} {hour} {ampm}' },
  { month: 'numeric',
    hour: 'numeric',
    pattern: '{month} {hour}',
    pattern12: '{month} {hour} {ampm}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'numeric',
    hour: 'numeric',
    pattern: '{weekday} {day}/{month} {hour}',
    pattern12: '{weekday} {day}/{month} {hour} {ampm}' },
  { month: 'short',
    hour: 'numeric',
    pattern: '{month} {hour}',
    pattern12: '{month} {hour} {ampm}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'short',
    hour: 'numeric',
    pattern: '{weekday} {day} {month} {hour}',
    pattern12: '{weekday} {day} {month} {hour} {ampm}' },
  { day: 'numeric',
    month: 'short',
    hour: 'numeric',
    pattern: '{day} {month} {hour}',
    pattern12: '{day} {month} {hour} {ampm}' },
  { day: 'numeric',
    month: 'numeric',
    hour: 'numeric',
    pattern: '{day}/{month} {hour}',
    pattern12: '{day}/{month} {hour} {ampm}' },
  { day: 'numeric',
    hour: 'numeric',
    pattern: '{day} {hour}',
    pattern12: '{day} {hour} {ampm}' },
  { year: 'numeric',
    hour: 'numeric',
    pattern: '{year} {hour}',
    pattern12: '{year} {hour} {ampm}' },
  { month: 'numeric',
    year: 'numeric',
    hour: 'numeric',
    pattern: '{month}/{year} {hour}',
    pattern12: '{month}/{year} {hour} {ampm}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'numeric',
    year: 'numeric',
    hour: 'numeric',
    pattern: '{weekday} {day}/{month}/{year} {hour}',
    pattern12: '{weekday} {day}/{month}/{year} {hour} {ampm}' },
  { month: 'short',
    year: 'numeric',
    hour: 'numeric',
    pattern: '{month} {year} {hour}',
    pattern12: '{month} {year} {hour} {ampm}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    hour: 'numeric',
    pattern: '{weekday} {day} {month} {year} {hour}',
    pattern12: '{weekday} {day} {month} {year} {hour} {ampm}' },
  { month: 'long',
    year: 'numeric',
    hour: 'numeric',
    pattern: '{month} {year} {hour}',
    pattern12: '{month} {year} {hour} {ampm}' },
  { day: 'numeric',
    month: 'short',
    year: 'numeric',
    hour: 'numeric',
    pattern: '{day} {month} {year} {hour}',
    pattern12: '{day} {month} {year} {hour} {ampm}' },
  { day: 'numeric',
    month: 'numeric',
    year: 'numeric',
    hour: 'numeric',
    pattern: '{day}/{month}/{year} {hour}',
    pattern12: '{day}/{month}/{year} {hour} {ampm}' },
  { weekday: 'short',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{weekday} {hour}:{minute}',
    pattern12: '{weekday} {hour}:{minute} {ampm}' },
  { weekday: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{weekday} {day} {hour}:{minute}',
    pattern12: '{weekday} {day} {hour}:{minute} {ampm}' },
  { year: 'numeric',
    era: 'short',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{year} {era} {hour}:{minute}',
    pattern12: '{year} {era} {hour}:{minute} {ampm}' },
  { month: 'short',
    year: 'numeric',
    era: 'short',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{month} {year} {era} {hour}:{minute}',
    pattern12: '{month} {year} {era} {hour}:{minute} {ampm}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    era: 'short',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{weekday} {day} {month} {year} {era} {hour}:{minute}',
    pattern12: '{weekday} {day} {month} {year} {era} {hour}:{minute} {ampm}' },
  { day: 'numeric',
    month: 'short',
    year: 'numeric',
    era: 'short',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{day} {month} {year} {era} {hour}:{minute}',
    pattern12: '{day} {month} {year} {era} {hour}:{minute} {ampm}' },
  { month: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{month} {hour}:{minute}',
    pattern12: '{month} {hour}:{minute} {ampm}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{weekday} {day}/{month} {hour}:{minute}',
    pattern12: '{weekday} {day}/{month} {hour}:{minute} {ampm}' },
  { month: 'short',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{month} {hour}:{minute}',
    pattern12: '{month} {hour}:{minute} {ampm}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'short',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{weekday} {day} {month} {hour}:{minute}',
    pattern12: '{weekday} {day} {month} {hour}:{minute} {ampm}' },
  { day: 'numeric',
    month: 'short',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{day} {month} {hour}:{minute}',
    pattern12: '{day} {month} {hour}:{minute} {ampm}' },
  { day: 'numeric',
    month: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{day}/{month} {hour}:{minute}',
    pattern12: '{day}/{month} {hour}:{minute} {ampm}' },
  { day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{day} {hour}:{minute}',
    pattern12: '{day} {hour}:{minute} {ampm}' },
  { year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{year} {hour}:{minute}',
    pattern12: '{year} {hour}:{minute} {ampm}' },
  { month: 'numeric',
    year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{month}/{year} {hour}:{minute}',
    pattern12: '{month}/{year} {hour}:{minute} {ampm}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'numeric',
    year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{weekday} {day}/{month}/{year} {hour}:{minute}',
    pattern12: '{weekday} {day}/{month}/{year} {hour}:{minute} {ampm}' },
  { month: 'short',
    year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{month} {year} {hour}:{minute}',
    pattern12: '{month} {year} {hour}:{minute} {ampm}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{weekday} {day} {month} {year} {hour}:{minute}',
    pattern12: '{weekday} {day} {month} {year} {hour}:{minute} {ampm}' },
  { month: 'long',
    year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{month} {year} {hour}:{minute}',
    pattern12: '{month} {year} {hour}:{minute} {ampm}' },
  { day: 'numeric',
    month: 'short',
    year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{day} {month} {year} {hour}:{minute}',
    pattern12: '{day} {month} {year} {hour}:{minute} {ampm}' },
  { day: 'numeric',
    month: 'numeric',
    year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    pattern: '{day}/{month}/{year} {hour}:{minute}',
    pattern12: '{day}/{month}/{year} {hour}:{minute} {ampm}' },
  { weekday: 'short',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{weekday} {hour}:{minute}:{second}',
    pattern12: '{weekday} {hour}:{minute}:{second} {ampm}' },
  { weekday: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{weekday} {day} {hour}:{minute}:{second}',
    pattern12: '{weekday} {day} {hour}:{minute}:{second} {ampm}' },
  { year: 'numeric',
    era: 'short',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{year} {era} {hour}:{minute}:{second}',
    pattern12: '{year} {era} {hour}:{minute}:{second} {ampm}' },
  { month: 'short',
    year: 'numeric',
    era: 'short',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{month} {year} {era} {hour}:{minute}:{second}',
    pattern12: '{month} {year} {era} {hour}:{minute}:{second} {ampm}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    era: 'short',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{weekday} {day} {month} {year} {era} {hour}:{minute}:{second}',
    pattern12: '{weekday} {day} {month} {year} {era} {hour}:{minute}:{second} {ampm}' },
  { day: 'numeric',
    month: 'short',
    year: 'numeric',
    era: 'short',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{day} {month} {year} {era} {hour}:{minute}:{second}',
    pattern12: '{day} {month} {year} {era} {hour}:{minute}:{second} {ampm}' },
  { month: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{month} {hour}:{minute}:{second}',
    pattern12: '{month} {hour}:{minute}:{second} {ampm}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{weekday} {day}/{month} {hour}:{minute}:{second}',
    pattern12: '{weekday} {day}/{month} {hour}:{minute}:{second} {ampm}' },
  { month: 'short',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{month} {hour}:{minute}:{second}',
    pattern12: '{month} {hour}:{minute}:{second} {ampm}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'short',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{weekday} {day} {month} {hour}:{minute}:{second}',
    pattern12: '{weekday} {day} {month} {hour}:{minute}:{second} {ampm}' },
  { day: 'numeric',
    month: 'short',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{day} {month} {hour}:{minute}:{second}',
    pattern12: '{day} {month} {hour}:{minute}:{second} {ampm}' },
  { day: 'numeric',
    month: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{day}/{month} {hour}:{minute}:{second}',
    pattern12: '{day}/{month} {hour}:{minute}:{second} {ampm}' },
  { day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{day} {hour}:{minute}:{second}',
    pattern12: '{day} {hour}:{minute}:{second} {ampm}' },
  { year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{year} {hour}:{minute}:{second}',
    pattern12: '{year} {hour}:{minute}:{second} {ampm}' },
  { month: 'numeric',
    year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{month}/{year} {hour}:{minute}:{second}',
    pattern12: '{month}/{year} {hour}:{minute}:{second} {ampm}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'numeric',
    year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{weekday} {day}/{month}/{year} {hour}:{minute}:{second}',
    pattern12: '{weekday} {day}/{month}/{year} {hour}:{minute}:{second} {ampm}' },
  { month: 'short',
    year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{month} {year} {hour}:{minute}:{second}',
    pattern12: '{month} {year} {hour}:{minute}:{second} {ampm}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{weekday} {day} {month} {year} {hour}:{minute}:{second}',
    pattern12: '{weekday} {day} {month} {year} {hour}:{minute}:{second} {ampm}' },
  { month: 'long',
    year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{month} {year} {hour}:{minute}:{second}',
    pattern12: '{month} {year} {hour}:{minute}:{second} {ampm}' },
  { day: 'numeric',
    month: 'short',
    year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{day} {month} {year} {hour}:{minute}:{second}',
    pattern12: '{day} {month} {year} {hour}:{minute}:{second} {ampm}' },
  { day: 'numeric',
    month: 'numeric',
    year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{day}/{month}/{year} {hour}:{minute}:{second}',
    pattern12: '{day}/{month}/{year} {hour}:{minute}:{second} {ampm}' },
  { weekday: 'short',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{weekday} {minute}:{second}' },
  { weekday: 'short',
    day: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{weekday} {day} {minute}:{second}' },
  { year: 'numeric',
    era: 'short',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{year} {era} {minute}:{second}' },
  { month: 'short',
    year: 'numeric',
    era: 'short',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{month} {year} {era} {minute}:{second}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    era: 'short',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{weekday} {day} {month} {year} {era} {minute}:{second}' },
  { day: 'numeric',
    month: 'short',
    year: 'numeric',
    era: 'short',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{day} {month} {year} {era} {minute}:{second}' },
  { month: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{month} {minute}:{second}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{weekday} {day}/{month} {minute}:{second}' },
  { month: 'short',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{month} {minute}:{second}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'short',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{weekday} {day} {month} {minute}:{second}' },
  { day: 'numeric',
    month: 'short',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{day} {month} {minute}:{second}' },
  { day: 'numeric',
    month: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{day}/{month} {minute}:{second}' },
  { day: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{day} {minute}:{second}' },
  { year: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{year} {minute}:{second}' },
  { month: 'numeric',
    year: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{month}/{year} {minute}:{second}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'numeric',
    year: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{weekday} {day}/{month}/{year} {minute}:{second}' },
  { month: 'short',
    year: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{month} {year} {minute}:{second}' },
  { weekday: 'short',
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{weekday} {day} {month} {year} {minute}:{second}' },
  { month: 'long',
    year: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{month} {year} {minute}:{second}' },
  { day: 'numeric',
    month: 'short',
    year: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{day} {month} {year} {minute}:{second}' },
  { day: 'numeric',
    month: 'numeric',
    year: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    pattern: '{day}/{month}/{year} {minute}:{second}' } ]

and that is coming from:

        "formats": {
            "medium": "{1} {0}",
            "availableFormats": {
                "E": "E",
                "EHm": "E HH:mm",
                "EHms": "E HH:mm:ss",
                "Ed": "E d",
                "Ehm": "E h:mm a",
                "Ehms": "E h:mm:ss a",
                "Gy": "y G",
                "GyMMM": "MMM y G",
                "GyMMMEd": "E d MMM y G",
                "GyMMMd": "d MMM y G",
                "H": "HH 'h'",
                "Hm": "HH:mm",
                "Hms": "HH:mm:ss",
                "M": "L",
                "MEd": "E d/M",
                "MMM": "LLL",
                "MMMEd": "E d MMM",
                "MMMd": "d MMM",
                "Md": "d/M",
                "d": "d",
                "h": "h a",
                "hm": "h:mm a",
                "hms": "h:mm:ss a",
                "ms": "mm:ss",
                "y": "y",
                "yM": "M/y",
                "yMEd": "E d/M/y",
                "yMMM": "MMM y",
                "yMMMEd": "E d MMM y",
                "yMMMM": "MMMM y",
                "yMMMd": "d MMM y",
                "yMd": "d/M/y",
                "yQQQ": "QQQ y",
                "yQQQQ": "QQQQ y"
            }
        }

Clearly, there is no hours/minutes pattern with hours using the 2-digits pattern. But also I noticed that I'm not generating any value with hour12 entry, that seems odd, maybe that's the missing link here. I'm seeing:

// polyfill with default "hour12" value
new IntlPolyfill.DateTimeFormat( 'fr-FR', { hour: 'numeric', minute : 'numeric' }).format(Date.now())
"1:05 PM"
new IntlPolyfill.DateTimeFormat( 'fr-FR', { hour: '2-digit', minute : 'numeric' }).format(Date.now())
"1:05 PM"
new IntlPolyfill.DateTimeFormat( 'fr-FR', { hour: '2-digit', minute : '2-digit' }).format(Date.now())
"1:06 PM"
new IntlPolyfill.DateTimeFormat( 'fr-FR', { hour: 'numeric', minute : '2-digit' }).format(Date.now())
"1:06 PM"

// native with default "hour12" value
new Intl.DateTimeFormat( 'fr-FR', { hour: 'numeric', minute : 'numeric' }).format(Date.now())
"13:06"
new Intl.DateTimeFormat( 'fr-FR', { hour: '2-digit', minute : 'numeric' }).format(Date.now())
"13:07"
new Intl.DateTimeFormat( 'fr-FR', { hour: '2-digit', minute : '2-digit' }).format(Date.now())
"13:07"
new Intl.DateTimeFormat( 'fr-FR', { hour: 'numeric', minute : '2-digit' }).format(Date.now())
"13:07"

// native with "hour12" value set to true
new Intl.DateTimeFormat( 'fr-FR', { hour: '2-digit', minute : '2-digit', hour12: true }).format(Date.now())
"1:08 PM"
new Intl.DateTimeFormat( 'fr-FR', { hour: 'numeric', minute : '2-digit', hour12: true }).format(Date.now())
"1:12 PM"

I will try to workout the details today.

@caridy caridy mentioned this issue Jun 18, 2015
Merged
caridy added a commit that referenced this issue Jun 18, 2015
@caridy
Merge pull request #110 from caridy/hour12
a4d9710 
Fixes #109: set hour12 default value for each cldr date format patterns
@caridy
Copy link
Collaborator

caridy commented Jun 18, 2015

@danieljuhl @Ekhoo go ahead and try intl@1.0.0-rc-2

@danieljuhl
Copy link

@caridy Thanks, I'll test it tomorrow morning central european time.

@Ekhoo
Copy link
Author

Ekhoo commented Jun 19, 2015

@caridy I still have the problem :/

@caridy
Copy link
Collaborator

caridy commented Jun 19, 2015

@danieljuhl @Ekhoo are you guys trying intl@1.0.0-rc-4?

@Ekhoo
Copy link
Author

Ekhoo commented Jun 20, 2015

I tried the 1.0.0-rc-4 and I still have the problem.

@caridy caridy reopened this Jun 20, 2015
@caridy caridy mentioned this issue Jul 7, 2015
Open
@shouze
Copy link

shouze commented Sep 5, 2015

Any news about this one guys?

@caridy
Copy link
Collaborator

caridy commented Sep 7, 2015

@shouze I haven't get a chance to work on this. I have some ideas, in case someone wants to try to bake in a solution. Feel free to reach out to me.

@shouze
Copy link

shouze commented Sep 7, 2015

@caridy can you expose your ideas? How can I (or my team) help you?

@caridy
Copy link
Collaborator

caridy commented Sep 7, 2015

check your gmail :)

@shouze
Copy link

shouze commented Sep 19, 2015

@caridy sorry I've been very busy maybe this will be ok the coming week.

@caridy
Copy link
Collaborator

caridy commented Sep 19, 2015

yes, will be perfect since it is the TC39 week, which means I will be working on Intl stuff all week :)

@MikaFima
Copy link

Hi, I'm experiencing same behavior on both hour: 'numeric' and hour: '2-digit' formats.
(Currently using v1.0.1)

@rkoberg
Copy link

rkoberg commented Dec 31, 2015

Me too: Using:

<FormattedDate
  day="numeric"
  month="short"
  value={new Date().setTime(bc.date)}
  year="numeric"
/>

I am getting a warning in react saying the server is rendering the formatted date differently than what is rendered on the client. I am running the server and client on the same machine (currently). How can I ensure the date is rendered the same?

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) 35.0.0.0:$1933.0.1">Feb 28, 2016</span><
 (server) 35.0.0.0:$1933.0.1">28 Feb. 2016</span><

@rkoberg rkoberg mentioned this issue Dec 31, 2015
Closed
@caridy
Copy link
Collaborator

caridy commented Jan 4, 2016

@rkoberg this is a big problem when it comes to isomorphic apps, if the env diverge, the rehydration checks might fail.

In this particular case, you can probably use this branch, https://github.com/andyearnshaw/Intl.js/tree/cldr-refactor, and let us know if that helps. I plan to release that in a couple of weeks.

As for the observable differences that might occur between the server and client with respect to react-intl, I have been discussing it with @ericf, and we might be able to solve it at react level, forcing react to ignore differences in the content of a react-intl component. But that might take a while to land.

@caridy
Copy link
Collaborator

caridy commented Feb 11, 2016

Fixed by PR #146, shipped in intl@1.1.0

@caridy caridy closed this as completed Feb 11, 2016
@snyk-bot snyk-bot mentioned this issue Mar 21, 2020
Open
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

taking in consideration hour12 default value from each cldr date format patterns caridy/Intl.js
7 participants
@caridy @shouze @rkoberg @andyearnshaw @danieljuhl @Ekhoo @MikaFima