formatter.js icon indicating copy to clipboard operation
formatter.js copied to clipboard

Add support for currency formats

Open dcalhoun opened this issue 12 years ago • 6 comments

Do you have any plans to add support for formatting inputs for currency values (e.g. – $#,###.##)?

Maybe something along the lines of this...

var formatted = new Formatter(document.getElementById('input-currency'), {
  'pattern' : '${{9}},{{999}}.{{99}}'
});

dcalhoun avatar Nov 12 '13 22:11 dcalhoun

I have had interest in solving this problem, unfortunately, I haven't been able to determine if it falls in the scope of this library. Currencies behave differently than patterns that Formatter currently handles. A currency pattern would consist of anchors at both the start and end with a repeating pattern in the middle.

example

user input moves from right to left

1] $0.00
2] $0.01
3] $0.12
4] $1.23

middle section grows

5] $12.34
.
.
x] $1,234,567,8.90

Besides trying to figure out the mess of logic that would allow this functionality (internally), I would need to find a way to expose it to the user. Possibly along the lines of:

var formatted = new Formatter(document.getElementById('input-currency'), {
  'pattern' : Formatter.currency
});

I am leaning towards the idea of this problem being solved in a separate library.

jaridmargolin avatar Nov 13 '13 02:11 jaridmargolin

Yeah, I knew there would be a bit of complexity for this functionality. Is your inclination of the problem being out of scope based on the goals of this library or merely the level of complexity/time commitment? IMHO I feel like it's a good candidate for the scope of this library. It is still formatting an input.

I know very little as to how the library works currently, but would expanding the options (and obviously the function of the library) like the following possibly work?

var formatted = new Formatter(document.getElementById('input-currency'), {
  'prefix' : '$',
  'pattern' : '{{999}},',
  'suffix' : '.{{99}}',
  'direction' : 'left'
});

dcalhoun avatar Nov 13 '13 16:11 dcalhoun

Currency in general is more complex than what's being discussed here. You have number formatting, which can switch the , and . or use spaces, and currency indicator placement.

eg. 1,234.00, 1.234,00, 1 234,89 and $1,234.00 vs 1.234,56 € (german)

It only gets more complex, but those are some of the common things worth noting.

jejacks0n avatar Nov 13 '13 17:11 jejacks0n

@jejacks0n couldn't the examples you provided be handled (in theory) if the options I listed were made available?

var formatted = new Formatter(document.getElementById('input-currency'), {
  'prefix' : '',
  'pattern' : '{{999}}.',
  'suffix' : ',{{99}} €',
  'direction' : 'left'
});

dcalhoun avatar Nov 13 '13 17:11 dcalhoun

@dcalhoun I like the options you provided. I am unsure if they will cover all currency use cases (as I have 0 expertise in this area), however they still seem helpful. It will take some time to complete (limited time to work on this task) but I will begin implementation.

jaridmargolin avatar Dec 01 '13 07:12 jaridmargolin

@jaridmargolin thanks for the update. I know it's a good bit of work, but I'm glad to see the willingness to include new ideas. Thanks a lot!

dcalhoun avatar Dec 02 '13 14:12 dcalhoun