beholdr / maska

Simple zero-dependency input mask for Alpine.js, Svelte, Vue.js and vanilla JS.

Home Page:https://beholdr.github.io/maska/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Formatting of currency input breaks for 'de-DE'

Komald opened this issue · comments

Discussed in #193

Originally posted by Komald October 12, 2023
Using the reference from the example of Money format via hooks,
I have added code like below:

HTML:
<input v-maska:[maskOptions] data-maska="0.99" data-maska-tokens="0:\d:multiple|9:\d:optional" v-model="tax_rate"/>


    maskOptions = {
          preProcess: val => val.replace(/[$,]/g, ''),
          postProcess: val => {
            if (!val) return '';

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

            return Intl.NumberFormat(localNumberformat, {
              style: 'currency',
              currency: localCurrency,
            }).format(val)
              .slice(0, sub ? -sub : undefined);
          },
        };

where localNumberformat can be 'de-DE' or 'en-US' and localCurrency can be USD, EUR

Above code works fine for en-US and USD, but when switched to de-DE, the input field starts appending 0 after every digit.
Stackblitz link for reproducing the issue:
https://stackblitz.com/edit/nuxt-starter-xcr8ue?file=app.vue

Try to enter 34367.85 value in the text field.

Attaching the screen-rec below.

maska-de-input-err.mp4

This is not a bug, you just need to adapt your code to your currency format.

@beholdr Can you point to some example for Reference?

Example from docs is for USD currency, that's why it has line val.replace(/[$,]/g, '') for example. EUR currency don't have $ symbol, it has symbol. You can take USD example for reference and adapt it to your case.

But why it's attaching 0 after every digit? Is that not an issue?
Sorry I am not very good at regex.

Additionally this is the case for all the non-en currency formats.
I tried with
'ru-RU', currency: RUB
'ja-JP', currency: JPY
'ar-EG', currency: AED
for all of these, input field went haywire.

Can you please help?