Bootstrap TouchSpin + NumeralJS using locale pt-br is not working

Question

I'm trying to use bootstrap touchspin + numeraljs to set the location of my currency input to pt-br.

For this I registered a custom locale through the NumeralJS, so when I use the locale that created the increment and decrement functions do not work correctly. If I use the locale en, the functions work perfectly.

The javascript code used is as follows:

 (function(global, factory) {
   if (typeof define === 'function' && define.amd) {
     define(['../numeral'], factory);
   } else if (typeof module === 'object' && module.exports) {
     factory(require('../numeral'));
   } else {
     factory(global.numeral);
   }
 }(this, function(numeral) {
   numeral.register('locale', 'pt-br', {
     delimiters: {
       thousands: '.',
       decimal: ','
     },
     abbreviations: {
       thousand: 'mil',
       million: 'milhões',
       billion: 'b',
       trillion: 't'
     },
     ordinal: function(number) {
       return 'º';
     },
     currency: {
       symbol: 'R$'
     }
   });
 }));


 numeral.locale('pt-br');
 $("input[name='demo_callback']").TouchSpin({
   callback_before_calculation: function(v) {

     return numeral(v).value();
   },
   callback_after_calculation: function(v) {

     return numeral(v).format("$0,0.00");
   }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/4.2.5/jquery.bootstrap-touchspin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>


<input id="demo_callback" type="text" value="1.00" data-bts-min="-1" data-bts-max="1000000" data-bts-step=".01" data-bts-decimals="2" name="demo_callback" />

Best regards

score 1 · Accepted Answer · answered Aug 04 '18 at 14:45

Thanks to all who tried to help,

I was able to solve the problem by replacing the decimal separator of the locale en with the decimal separator of the locale pt-br before sending it to the conversion via NumeralJS:

 (function(global, factory) {
   if (typeof define === 'function' && define.amd) {
     define(['../numeral'], factory);
   } else if (typeof module === 'object' && module.exports) {
     factory(require('../numeral'));
   } else {
     factory(global.numeral);
   }
 }(this, function(numeral) {
   numeral.register('locale', 'pt-br', {
     delimiters: {
       thousands: '.',
       decimal: ','
     },
     abbreviations: {
       thousand: 'mil',
       million: 'milhões',
       billion: 'b',
       trillion: 't'
     },
     ordinal: function(number) {
       return 'º';
     },
     currency: {
       symbol: 'R$'
     }
   });
 }));


 numeral.locale('pt-br');
 $("input[name='demo_callback']").TouchSpin({
   callback_before_calculation: function(v) {

     return numeral(v.replace('.', ',')).value();
   },
   callback_after_calculation: function(v) {

     return numeral(v.replace('.', ',')).format("$0,0.00");
   }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/4.2.5/jquery.bootstrap-touchspin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>


<input id="demo_callback" type="text" value="1.00" data-bts-min="-1" data-bts-max="1000000" data-bts-step=".01" data-bts-decimals="2" name="demo_callback" />

Bootstrap TouchSpin + NumeralJS using locale pt-br is not working

1 Answers1