How to format currency input?

[9mm]

I'm trying to create a currency input that works as follows: (edit: see example in next comment)

input   mask output

3       $3
50      $350
0       $3,500
6       $35,006
.       $35,006.
05      $35,006.05
<-      $35,006.0 

Basically I always want the $ at the front, and I don't want cents to show up unless they type . at which point it would fill in the cents

[9mm]

Basically exactly like this: https://dm4t2.github.io/vue-currency-input/playground.html

Choose options:

• Locale: en-US
• Currency: USD
• Currency display: Symbol
• Distractions: uncheck all 3 boxes

[9mm]

That's pretty buggy I'm trying to make it better. One question, how do I make

"any number of numbers followed by a single period followed by 2 numbers"

that above lets me keep typing ....

  <app-input-mask
    mask="90"
    tokens="9:[0-9]:multiple|0:[.]:optional"

[beholdr]

any number of numbers followed by a single period followed by 2 numbers

<input
  v-maska
  data-maska="0.99"
  data-maska-tokens="0:\d:multiple|9:\d:optional"
>

[9mm]

Hmm yeah this is tricky as I'm not sure how to get it to format to end in . (while theyre typing) without trying to add 00, etc. It also resets after 4 digits, etc.

I guess I will keep messing with it.

[9mm]

@beholdr do you have any idea how to solve the following?

I think the issue is that passing the formatted number back to the mask, when it sees $ its advancing 1 character.

You can see this in your example by just typing $4444, when you push it again it just reverts to $4.00

if I do this, it works great:

    const options = {
      preProcess: value => (
        value.replace(/[$,]/g, '')
      ),
      postProcess: value => {
        if (!value) return '';
        const digits = {};
        const number = value.replace(/[$,]/g, '');
        if (number.includes('.')) {
          digits.minimumFractionDigits = 2;
        } else {
          digits.maximumFractionDigits = 0;
        }
        return Intl.NumberFormat('en-US', {
          style: 'currency',
          currency: 'USD',
          currencyDisplay: 'symbol',
          useGrouping: 'always',
          ...digits,
        }).format(number);
      },
    };

Except now the problem is I dont have access to what they originally typed in the "unprocessed" state. For example if they type "424." I need to show "424." in the input and not immediately show "424.00"

So by preprocessing it makes the whole input work, but seems to remove any ability to actually see the raw typed value

[beholdr]

If you want to show "424." instead of "424.00", I think there are two options: a) you could add more checking logic in the postProcess hook (like checking number.endsWith('.') and manually adding dot after calling NumberFormat) or b) move whole formatting to onBlur event to not interfere with typing.

I think, if you making custom input element, second way is better.

[9mm]

If anyone finds this thread to format currency, this works perfectly how I want.

@beholdr even though this appears to work, I'm not 100% if this is the proper use of preProcess. Does this look acceptable to you? (nothing stands out edge-case wise)

<template>
  <app-input-mask
    mask="0.99"
    tokens="0:\d:multiple|9:\d:optional"
    :options="options"
    inputmode="numeric"
  />
</template>

<script>
import AppInputMask from '@/components/AppInputMask.vue';

export default {
  components: {
    AppInputMask,
  },
  setup() {
    const format = (value, cents) => (
      Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: cents,
        maximumFractionDigits: cents,
      }).format(value)
    );

    const options = {
      preProcess: value => (
        value.replace(/[$,]/g, '')
      ),
      postProcess: value => {
        if (!value) return '';
        const parts = value.split('.');
        if (parts.length === 1) return format(value, 0);
        if (parts[1].length === 0) return `${format(value, 0)}.`;
        return format(value, parts[1].length);
      },
    };

    return {
      options,
    };
  },
};
</script>

[9mm]

@Fuzik762 part of making it work is getting the locale right (the part in mine that says en-US) and the currency (the USD).

Because I dont know your locale/language, I had to pick a random part of the world (france) that appears to do that. The further problem is though, I don't live there and there are obvious quirks (coming from where I live) about this.

For example you will notice I had to add value.replace(',', '.'). This is because the Intl.NumberFormat will return NaN (it breaks) if you GIVE it a number to format like 12345,67. So even though its OUTPUTTING a number with , it expects the input number to look like this instead: 12345.67. Where I live, we use a period always so I don't need that.

    const format = (value, cents) => (
      Intl.NumberFormat('fr-FR', {
        style: 'decimal',
        currency: 'USD',
        currencyDisplay: 'narrowSymbol',
        minimumFractionDigits: cents,
        maximumFractionDigits: cents,
      }).format(value)
    );

    const options = {
      preProcess: value => (
        value.replace(/\s/g, '')
      ),
      postProcess: value => {
        if (!value) return '';
        const parts = value.split(',');
        if (parts.length === 1) return format(value, 0);
        if (parts[1].length === 0) return `${format(parts[0], 0)},`;
        return format(value.replace(',', '.'), parts[1].length);
      },
    };

[9mm]

Also I should mention you helped me find one bug. It doesn't break anything but semantically it doesn't really make sense.

This:

`if (parts[1].length === 0) return `${format(value, 0)}.`;`

Should actually be

if (parts[1].length === 0) return `${format(parts[0], 0)}.`;

[Fuzik762]

@9mm Wow, thank you very much for the clarification and efficiency, my mistake is that I forgot to specify the locale, but I changed it to the locale of my country and everything works! 👍
And thank @beholdr for such a wonderful tool.

[9mm]

@beholdr one weird question... I notice with the above code "meta.complete" returns alternating true/false based on the comma. In other words, it appears "complete" flag is acting very bizarre. For example using the 0.99 mask example I gave, with the pre/post process, it says the following is complete: $444,444 but $4,444,444 is not complete.

[beholdr]

I think it’s because of the multiple and optional tokens, completed is unreliable with them.

[beholdr]

I've reworked postProcess to single function and include in the demo examples

<script setup>
const options = {
  preProcess: val => val.replace(/[$,]/g, ''),
  postProcess: val => {
    if (!val) return ''

    const sub = 3 - (val.includes('.') ? val.length - val.indexOf('.') : 0)

    return Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
      .formatToParts(val)
      .map(v => v.value)
      .join('')
      .slice(0, sub ? -sub : undefined)
  }
}
</script>

<template>
  <input v-maska:[options] data-maska="0.99" data-maska-tokens="0:\d:multiple|9:\d:optional">
</template>

And there was a little bug with hooks processing, fixed in v2.1.5
Thanks @9mm

[9mm]

awesome!

[9mm]

what was the bug conditions btw?

[beholdr]

The bug appeared when hooks used with value binding. That's why completed has weird behaviour.

[9mm]

dude amazing, it works great now .thanks !