How to Format Financial Number Input? (Thousand separators and 2 decimal places)

[hwgz01]

Hi Fellow Wewebers

Does anyone know how to format input for Financial Numbers?
That can display:

1. Thousand separators
2. The maximum two decimal places (if and when there is any decimal value).

I have tried these methods, however had no luck,

Masked Input
Facing issue where the separator “,” would not automatically adjust itself. For example, initially 1,000 but when removing the zero at the end it would display 1,00

AI copilot
It would not stop users from entering more than 2 decimal numbers.

Suggestions from previous posts

Input that adds a comma separator when entering a number

Hi @luka if I put a pattern (000,000,000) in masked input pattern it is separating the input but it is doing it from left to right (for ex: 123,45) how do I make it (12,345)?

Thousands separator comma number input

Consegui resolver aqui no Brasil, colocar virgula e ponto. [Captura de Tela 2024-02-14 às 19.15.15]

Including:
“Numeral” plugin from NPM, however it is showing

“pluginVariables.69d4a5bb-09a3-4f3d-a94e-667c21c057eb.numeral is not a function”

[Joyce]

Hi @hwgz01

Would something like this work for you?

If yes, here’s the JS code snippet:

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});

return formatter.format(1000);

If not, let me know. I’ll try to think of another approach that wouldn’t be too cumbersome.