How to format antd Inputnumber to accept "," to decimal and "." to centesimal

Asked

Viewed 312 times

0

Hello, I’m using antd’s Inputnumber. In this example below antd is using regex so it formats the number, but it only accepts "." so I couldn’t just type "10.5" but "10.5"

 <InputNumber
  formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
  parser={value => value.replace(/\$\s?|(,*)/g, '')}
/>

Well, what I need to do is format with "," for when it is decimal (example: 15.8) and format with "." for when it is a Milesimal number (example: 1,000) that is, it needs to be in BRL format.

However antd does not have a BRL formatter by default, it has a calling property decimal but when I try to use it in this example the behavior of the numbers is incorrect (example: if I type 10,000 the result would be 1,0,000). My difficulty with antd is to join that two points (format for when it is decimal and for when it is centesimal).

As I don’t understand much about regex, I wonder if it is possible to solve my problem using only regex, or if I would have to somehow create a function and a logic to perform this formatting by default.

I am not very good with programming logic, I am working on it every day to improve it, I would like you to give me a way to go. Thanks in advance !

  • 1

    You can’t use your own locale? https://github.com/ant-design/ant-design/blob/master/components/locale/pt_BR.tsx

  • Um, I didn’t quite understand, I looked at the code but it doesn’t seem to be related to my problem, could explain me better ?

  • 1

    Antd allows you to configure the locale, to format numbers and subtitles in different languages. https://ant.design/components/config-provider/#Does-the-locale-problem-still-exist-in-Datepicker-Even-if-Configprovider-locale-is-used?

  • well, I guess that doesn’t solve my problem, but I’ll try, thank you !

  • Can’t it be this way? console.log(new Intl.Numberformat('de-de', { style: 'currency', currency: 'EUR' }).format(number); // expected output: "123.456,79 €"

  • 1

    See if this link also helps... https://stackoverflow.com/questions/55556221/how-do-you-format-a-number-to-currency-when-using-react-native-expo

  • Thanks for the help !

Show 2 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.