React-number-format: decimal and thousands separators format europe

[Deboracgs]

Hello,

I trying format the input to . and , but not working
Any solution for this?

return (
        <NumberFormat
            {...other}
            ref={inputRef}
            onValueChange={values => {
                onChange({
                    target: {
                        value: values.value,
                    },
                });
            }}          
            thousandSeparator="." 
            decimalSeparator=","
            allowNegative={false}
            prefix="R$"
        />
    );

[s-yadav]

Looks correct to me not sure what's not working on this ?

[josera21]

I have the same problem, for example: 980000.58 display like 98.000.045 and the correct value is 980.000,45

[martisj]

@Deboracgs where is ref={inputRef} coming from?

[Deboracgs]

from props @martisj , see the complete code

import React, { Component } from 'react';
import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";
import TextField from "@material-ui/core/TextField";
import FormControl from "@material-ui/core/FormControl";
import grey from "@material-ui/core/colors/grey";
import NumberFormat from 'react-number-format';
import PropTypes from 'prop-types';


const styles = theme => ({
    container: {
        display: 'flex',
        flexWrap: 'wrap',
    },
    margin: {
        marginTop: theme.spacing.unit,
        marginBottom: theme.spacing.unit,
    },
    cssLabel: {
        fontSize: 20,
        '&$cssFocused': {
            fontSize: 20
        },
        paddingBottom: 19,
    },
    cssFocused: {},
    cssUnderline: {
        paddingTop: 5,
        fontSize: 18
    }
});

const theme = createMuiTheme({
    palette: {
        primary: grey,
    },
});

function NumberFormatCustom(props) {
    const { inputRef, onChange, ...other } = props;
    return (
        <NumberFormat
            {...other}
            ref={inputRef}
            onValueChange={values => {
                onChange({
                    target: {
                        value: values.value,
                    },
                });
            }}
            thousandSeparator={"."}
            decimalSeparator={","}
            allowNegative={false}
            prefix="R$ "
            decimalScale={2}
            fixedDecimalScale={true}


        />
    );
}

NumberFormatCustom.propTypes = {
    inputRef: PropTypes.func.isRequired,
    onChange: PropTypes.func.isRequired,
};


class InputMoneyComponent extends Component {

    constructor(props) {
        super(props);

        this.state = {
            label: this.props.label,
            value: this.props.value,
            disabled: this.props.disabled
        }

    }



    handleChange = event => {
        this.props.onChange(event);
    };

    static getDerivedStateFromProps(nextProps, prevState) {

        return {
            label: nextProps.label,
            value: nextProps.value,
            disabled: nextProps.disabled
        }

    }


    render() {
        const { classes } = this.props;
        return (
            <div className={classes.container}>
                <FormControl className={classes.margin} fullWidth>
                    {
                        this.state.label != undefined &&
                        <InputLabel
                            FormLabelClasses={{
                                root: classes.cssLabel,
                                focused: classes.cssFocused
                            }}
                        >
                            {this.state.label}
                        </InputLabel>
                    }
                    <Input
                        classes={{
                            underline: classes.cssUnderline
                        }}
                        value={this.state.value}
                        onChange={this.handleChange}
                        disabled={this.state.disabled}
                        inputProps={{
                            maxLength: 14
                        }}
                        inputComponent={NumberFormatCustom}
                    />
                </FormControl>
            </div>
        );
    }
}

export default withStyles(styles)(InputMoneyComponent);

[Deboracgs]

I change to other package

[PraveenPuvvula]

I change to other package

Could you please tell me which? Thanks

[luishdez]

Same problem despite the effort and kindness to share this code. It's not useful for formatting numbers in some cases.

Check: toLocaleString (number) build-int JS function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString :) hope it helps. Remember it must be a type number to work so use parseInt if necessary.

Edit: useless -> not useful… Sorry ( that was to rude )

[s-yadav]

@luishdez.
Can you share the use case, expected vs current behavior.
Also a jsfiddle/pen or just a gif of problem will help me to understand what's the expected behavior you are looking for.

PS: on the latest versions '.' is replaced by provided decimal separator automatically.

[luishdez]

You can't use thousandSeparator with "." it throws an error that tells "." is the same as default separator.

https://codepen.io/luishdez/pen/MzxmZo Fork your example and changed to dot the thousand separator ( Eg. most common use in Spain )

[s-yadav]

Then you have to define decimal separator as well.
As the error says default decimal separator is '.'
And thousand separator and decimal separator can't be same.
Try defining both. Thosandseparator as '.' and decimal separator ','. It will work

[luishdez]

Ok sorry I understand now ( I didn't read properly ). But It's an Integer why forcing to define something it's not use.

[atipi]

Hi,
When I define the component like this I don't get decimal separator to work at all. It is invisible, gone after typing:

      return (
        <NumberFormat
          {...other}
          getInputRef={inputRef}
          onValueChange={values => {
            onChange({
              target: {
                value: values.value
              }
            });
          }}
          allowNegative={false}
          decimalSeparator={","}
          decimalPrecision={2}
          thousandSeparator={"."}
          suffix={"€"}
        />
      );

Also I got this warning
React does not recognize the decimalPrecision prop on a DOM element.

But the main thing is that decimal separator does not work.

I want to be able to enter 12,25€ value but at the moment it is formatted to 1.225€

[s-yadav]

As mentioned in doc
https://github.com/s-yadav/react-number-format#values-object
and Notes (6th point)
https://github.com/s-yadav/react-number-format#notes-and-quirks
values.value will be numeric string, if you are passing numeric string as value, you should set isNumericString={true} on the number format, so module can identify it's a formatted value or numeric string.

Here is the modified example of NumberFormat with Material UI for following case
https://codesandbox.io/s/2wr80zwlxy

[s-yadav]

@luishdez by default user can type decimal values, which can prevent by adding decimalScale={0}.
Though I can add a check for this if decimalScale is 0 then don't throw that error.

[Littlemad]

My 2 cents, @s-yadav It would be great if you could put this particular user case with the examples, I struggled quite a bit before finding your solution. I was understanding that I could use "." as thousand, but I wasn't understanding that I needed to define as well the decimalSeparator, so I was thinking that it wasn't working, when it was, and just the explanation wasn't clear to me. Thank you for your good work.