CODEWITHSUNDEEP
javascriptreactjsreact-intl
Anand
Anand

Reputation: 4551

How to allow german user to enter numbers in german format in React JavaScript

We are developing application which should support both German and English users.

What can we do to allow German users to enter numbers in German format (, as decimal point and . as thousand separator), and moment he tab out from input box, we should be able to convert input text into JavaScript number, Right now when we use Number() function it gives us the NaN for Number("12,23")

We are able to convert English text to German format number using new Intl.NumberFormat() but it is vice versa which we want.

Upvotes: 3

Views: 2267

Answers (1)

am05mhz
am05mhz

Reputation: 2875

you could use numeral.js locales http://numeraljs.com/#locales

// load a locale
numeral.register('locale', 'de', {
    delimiters: {
        thousands: '.',
        decimal: ','
    },
    abbreviations: {
        thousand: 'k',
        million: 'm',
        billion: 'b',
        trillion: 't'
    },
    ordinal : function (number) {
        return number === 1 ? 'er' : 'ème'; //this is taken from french example, don't know in german
    },
    currency: {
        symbol: '€' //same as above
    }
});

// switch between locales
numeral.locale('de');

console.log(numeral('123,45').value());
console.log(numeral('6.123,45').value());
console.log(numeral('123,45m').value());
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

Upvotes: 3

Related Questions