4

A combination of formatjs & javascript's native Intl.NumberFormat() supports formatting of numbers as currency in various cultures and units. But how can I format a range of currency as $1,000.00 - 5000.00.

Without repeating the symbol, where ever and however it is normally displayed?

Using react-intl:

<FormattedNumber value={minVal} style="currency" currency="USD" />
 - <FormattedNumber value={maxVal} style="currency" currency="USD" />

This will show $1,000.00 - $5000.00 which does not match my design spec. Stripping away the currency symbol off of the second value seems like a hackey strategy since I shouldn't/can't easily know the symbol to strip.

Formatting just as a regular decimal would be strictly incorrect - currency rules dictate different numbers of digits for the "minor units" depending on the currency.

And what about if the currency symbol is, I don't know, displayed at the end for the culture instead of at the beginning? (Does that happen?)

Jason Kleban
  • 20,024
  • 18
  • 75
  • 125

1 Answers1

0

How about something like numeral.js? The locales documentation seems like it could do what you're looking for. They have a number of locales already and are happy to welcome more as contributions.

Update: looks like someone already created an Angular integration too.

SeanKilleen
  • 8,809
  • 17
  • 80
  • 133