CODEWITHSUNDEEP
reactjsmaterial-ui
Akira Kotsugai
Akira Kotsugai

Reputation: 1159

How to allow 2 decimal separators with Material UI?

I use Material UI in my project and I would like to allow the user to choose between comma or period as decimal separator. They are not currency input fields, but just numerical fields that can have decimal places. Currently only period is accepted, if the user presses comma instead nothing happens.

Upvotes: 2

Views: 7231

Answers (1)

Haider Ali Anjum
Haider Ali Anjum

Reputation: 847

Making its type='number' will restrict the value parsing logic to the default one added in the html. if we want to parse the value entered in the field by our rules, we have to parse it explicitly. For that purpose we can use a regex to test the input value coming on on each keystroke on the field. and then will restrict populating the value if it restricts the rule.

You can use a following Regex to test for the input

//Dot: /^\d+(\.\d{0,2})?$/
//Comma: /^\d+(,\d{0,2})?$/

You see the running demo here: https://codesandbox.io/s/material-demo-forked-2gmmn?file=/demo.js

Upvotes: 4

Related Questions