Format feature

[Ximik]

Added format feature similar to moment.js. Also added tests for it and docs.

See #129

[gf3]

will this work OOTB with other locales?

[Ximik]

Yes, it will, OOTB format will work in more or less general form for all languages.

In my project i just add localization for RU manually to have better localization. However i think it should be some feedback from users before adding locales to the plugin itself (because for now it doesn't provide localization files).

[sandstrom]

@Ximik This would be an awesome enhancement! 🎉

This project recently got new maintainers (@carlholloway), so hopefully it's easier to advance this feature now!

Would it be possible to use the Unicode CLDR data for the ranges? That way multiple locales would be easy to support. As long as the tokens match with the tokens used by moment we should be able to use this range data (and if not, we may be able to map the tokens).

We'd then keep a small maintenance script in this repo, that parses the XML files from CLDR and produces JS/JSON output that can be minified into this dist.

---

http://unicode.org/Public/cldr/31/
http://cldr.unicode.org/translation/date-time-patterns#TOC-Date-Time-Intervals

Example of data in CLDR:

<intervalFormats>
  <intervalFormatFallback>{0} – {1}</intervalFormatFallback>
  <intervalFormatItem id="d">
    <greatestDifference id="d">d – d</greatestDifference>
  </intervalFormatItem>
  <intervalFormatItem id="h">
    <greatestDifference id="a">h a – h a</greatestDifference>
    <greatestDifference id="h">h – h a</greatestDifference>
  </intervalFormatItem>
  <intervalFormatItem id="H">
    <greatestDifference id="H">HH – HH</greatestDifference>
  </intervalFormatItem>
  <intervalFormatItem id="hm">
    <greatestDifference id="a">h:mm a – h:mm a</greatestDifference>
    <greatestDifference id="h">h:mm – h:mm a</greatestDifference>
    <greatestDifference id="m">h:mm – h:mm a</greatestDifference>
  </intervalFormatItem>
  <intervalFormatItem id="Hm">
    <greatestDifference id="H">HH:mm – HH:mm</greatestDifference>
    <greatestDifference id="m">HH:mm – HH:mm</greatestDifference>
  </intervalFormatItem>
  
  <!-- shortened for this example; there are more formats available -->
</intervalFormats>

[gf3]

i would be wary of adopting new external formats when browsers already have a locale-aware date formatting mechanism built-in. perhaps this functionality could be implemented as an optional wrapper on top of these built-in features?

[sandstrom]

@gf3 I love the Intl addition to JS, but since this is a moment.js plugin I think it would be good to align with (and to the extent possible piggyback of) whatever moment.js does.

Also, Intl doesn't support ranges and afaik it's not on the immediate roadmap either.

[Ximik]

@sandstrom such format will have issues with Russian at least, so I don't think it's good idea. Moreover, adding another config logic when there is one in the plugin itself seems like unnecessary overhead.
So, I think you should just convert your XML into plain JS/JSON config.

[sandstrom]

@Ximik I agree it should be converted to JS/JSON.

Converted it could look something like this:

{
  "fallback": '{0} – {1}',
  "type-d": {
    "diff-d": 'd – d',
  },
  "type-h": {
    "diff-a": 'h a – h a',
    "diff-h": 'h – h a',
  },
  "type-H": {
    "diff-H": 'HH – HH',
  },
  "type-hm": {
    "diff-a": 'h:mm a – h:mm a',
    "diff-h": 'h:mm – h:mm a',
    "diff-m": 'h:mm – h:mm a',
  },
  "type-Hm": {
    "diff-H": 'HH:mm – HH:mm',
    "diff-m": 'HH:mm – HH:mm',
  },

  // shortened for this example; there are more formats available
}

With regards to adding another config logic, I don't think we'll have to. The tokens (H, m, etc) match those used by moment already.

For a given locale (the data above is for en) one would simply:

1. Traverse the data structure, find the type we're looking for.
2. Determine the greatest difference between the two times (for example, for type-h there are two options, one where both times are in the same part of the day AM/PM, and one where they're in different parts).
3. Use the existing moment.format to format the strings, based on the tokens.

(this list glances over some details, but should explain the big picture)

The benefit to what I described would be that instead of someone manually having to code up formats for a dozen languages, we can just import formats from CLDR. Also, if formats change or new languages are added, we'd simply re-import the xml.