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?)
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.
Related
To get a consistent look and feel of both input and output views I am trying to use an disabled input element to display model data/values.
The value is a calculated temperature value and has several decimal digits. Since that does not make sense from an engineer's point of view I want to limit the displayed decimal digits to a certain amount (let's say two digits, the displayed value does not need to be rounded).
Example:
calculated value: 123.123456
value to display: 123.12
I read around the Internet and found many suggestions using input's step attribute like
step=".01"
to limit the decimal digits. There seem to be many people doing it that way, but it does not work for me.
I think view and data model need to kept separated so adapting the model data (like converting the values to strings or using toFixed()) does not seem to be a nice solution. The view should be able to format the data itself, not changing the data model and should have reading access in this case only.
There is a filter for doing this when accessing model data through the {{ }} notation. But this does not seem to be applicable straight out of the way.
So, do you have any suggestions about limiting the decimal numbers?
For the sake of investigation and in order to provide a working sample code I created a Pen.
I need to translate the date format to Japanese locale but its showing output wrongly.I also tried by changing the locale of the browser but its not working in both chrome and IE
app.filter('japan', function() {
return function(dateString, format) {
return moment().locale('ja').format('LLLL');
};
})
Output for the format is 2016蟷ｴ6譛�20譌･蜊亥燕11譎Ｎ蛻� 譛域屆譌･
Required output is 2016年6月20日午前11時30分 月曜日
This isn't an issue with Moment. It's an encoding problem known as mojibake and can happen when your page has an encoding that doesn't correctly handle the characters you are using. In general, it's preferable to use a neutral encoding like UTF-8 or UTF-16 (UTF-8 is the de-facto standard), and from the comments above, it sounds like this did indeed fix your issue.
Additionally, it is a good idea to set a lang="" attribute on the element containing your localized content (you can do this as high up as the <html> element), because certain characters can have different appearances depending on the locale.
To take your text as an example, the top-right portion of the character 曜 looks like 羽 with lang="zh", but looks like two side-by-side ヨs with lang="jp".
The question is actually pretty simple. I have the following code to display my currency on my page. $this->Number->currency($HdViewBestellingen->INKBLPRIJS, 'EUR') This prints out the curreny like:
€0.12
But I want the currency to print out like:
€ 0.12
(notice the space between the € symbol and the number).
My question is, how do I achieve this using the CakePHP number formatter?
After reading http://book.cakephp.org/3.0/en/core-libraries/number.html#formatting-currency-values.
I have been messing around with the options array which can be passed as well like $this->Number->currency($HdViewBestellingen->INKBLPRIJS, 'EUR', ['pattern' => '#, ####.##']) but I couldn't get it to work.
It depends on the locale you are using. The locale also controls the position of the symbol.
If you use en_US then there are no spaces between the symbol and the number.
I suggest you to use any of the european locale. If you don't want to change it at application level in bootstrap.php you can set it just for one occurence like so
$this->Number->currency($HdViewBestellingen->INKBLPRIJS,'EUR', ['locale' => 'it_IT'])
I used italian locale because if you use german locale the euro symbol comes after the number
I'm interested in creating a filter that would accept an amount, ISO 4217 currency code, and fraction size, and return the amount in that format. I noticed that AngularJS has goog.i18n.currency.getGlobalCurrencyPattern in i18n/closure/currencySymbols.js, but I'm relatively new to Angular and not sure if it is possible to use it?
The currency pattern and symbols are just that. It determines how to display a number. It will not convert it from XXX to XXX. You will have to do the converting part based on the current conversion rates.
As far as using the built-in currency formatting, there are multiple ways: in the template, in the code.
In the template:
<div>{{myCurrencyValue | currency:'XXX'}}</div>
In the code:
var formatted = $filter('currency')(myCurrencyValue, 'XXX')
In both cases, 'XXX' is optional [and is symbol] and will use the default currency for current locale
Example: http://jsfiddle.net/TheSharpieOne/N7YuP/
More information can be found here: Currency Docs
UPDATE
Example with ISO 4217 codes using custom filter: http://jsfiddle.net/TheSharpieOne/N7YuP/3/
Note: ISO 4217 doesn't dictate the currency symbols, I used this for symbol reference and mapped them.
Okay before I get right into my question does anyone know if there is a tool for building string formats? What I'm thinking is something like a pretty simple user interface where you choose whether you want to display commas, zero values, dollar signs etc and then it spits out the stringformat for you. If there is one I'd love to know about it. If there's not it's the sort of thing people like me would love!
My question is. What is the string format for displaying an integer with comma separators for thousands, no decimal places and nothing for zero values.
I know the string format for an integer with comma separators and no decimal places is:
StringFormat='0,0.'
And I know the string format for displaying nothing for zero values is:
StringFormat='{}{0:#}'
But combining the two has me stumped. Thanks very much!
I'm not 100% sure what you're after, but after comparing your two string formats, I think I know what you're after... please let me know if I am mistaken.
Once again, you almost had what I think you want... how about trying this:
StringFormat='{}{0:#,#.}'
Or just
StringFormat='#,#.' (Just replace the '0' from your example with '#')
These are equivalent. Please note that again, these will both round the number to the nearest integer.
UPDATE >>>
Here are two very useful links to help you with your string.Formats in the future:
Custom Numeric Format Strings
Custom Date and Time Format Strings
ContentStringFormat is separate dependency property out side of Bindig{} assets.
ContentStringFormat='{}{0:#}'
Example:
<Label Content="{Binding Path=MaxLevelofInvestment}" ContentStringFormat="Amount is {0}" />