How to add decimal point to decimal number in accounting.js?

Question

I'm working on a Point of Sale and I am using accounting.js to format a number on the amount that is being tendered in the payment module.

Apparently I want the field to have a floating value so I have this virtual numpad that when clicked it will concatenate the value per button like so:

But when I click on the decimal button it doesn't work. Here is what I have tried so far, unsure what I'm missing.

// Payment Numpad  
$('section.payment-numpad .number-char').click(function(){

    let num = $(this).data('action');
    let defaultAmt = $('td.col-tendered.edit').text().replace(/,/g, "");
    let tendered;
    if(defaultAmt === "0.00"){
        tendered = num;
    }else{
        tendered = defaultAmt + num;
    }

    $('td.col-tendered.edit').text(accounting.formatNumber(parseFloat(tendered)));
    return false;
});

I also tried the .toFixed(2) in accounting.js but still doesn't work.

UPDATE: Here is a video for reference

score 0 · Answer 1 · answered Jul 03 '18 at 10:32

0

It's in the documentation. Either change the setting globally...

// Settings object that controls default parameters for library methods:
accounting.settings = {
    currency: {
        symbol : "$",   // default currency symbol is '$'
        format: "%s%v", // controls output: %s = symbol, %v = value/number (can be object: see below)
        decimal : ".",  // decimal point separator
        thousand: ",",  // thousands separator
        precision : 2   // decimal places
    },
    number: {
        precision : 0,  // default precision on numbers is 0
        thousand: ",",
        decimal : "."
    }
}

or change the setting locally...

// Standard usage and parameters (returns string):
accounting.formatNumber(number, [precision = 0], [thousand = ","], [decimal = "."])

answered Jul 03 '18 at 10:32

bastos.sergio

6,684
4
26
36

I think I'm currently using this setting already? The thing is I can't add decimal point in the tendered field because of the formatting perhaps. – leonardeveloper Jul 03 '18 at 10:41
You can see how it works here: https://www.dropbox.com/s/az6ibq5dxpe37ps/2018-07-03%2018-47-35.flv?dl=0 – leonardeveloper Jul 03 '18 at 10:51
Have you tried changing your code to `$('td.col-tendered.edit').text(accounting.formatNumber(parseFloat(tendered), 2));` – bastos.sergio Jul 03 '18 at 11:08

Jagjeet Singh · Accepted Answer · 2018-07-04T11:35:38.040

Try this, hope this help you :)

function operator(amt, num) {
    let val = '';
    switch (num) {
     case '.':
      if (parseFloat(amt) == 0) {
       val = '0.';
      } else {
       if (amt.indexOf('.') > -1) {
        val = amt;
       } else {
        val = amt + '.';
       }
      }
      break;
    }
    return val;
   }

   $('section.payment-numpad .number-char').click(function () {
    let that = $(this),
            data = that.data(),
            num = data.action;

    let defaultAmt = $('.col-tendered.edit').data('value');
    let tendered;

    if (isNaN(parseFloat(defaultAmt))) {
     defaultAmt = 0;
    }

    if (that.hasClass('operator')) {
     tendered = operator(defaultAmt, num);
    } else {
     tendered = defaultAmt + '' + num;
    }

    $('.value').text(tendered);
    $('.col-tendered.edit').attr('data-value', tendered).data('value', tendered);
    var precision = 2;
    /*if (tendered != '') {
     var s = tendered.split('.');
     if (s[1] != undefined) {
      precision = s[1].length;
     }
    }*/
    $('.col-tendered.edit').text(accounting.formatNumber(parseFloat(tendered), precision));
    return false;
   });

table {
  width: 100%;    
}
.number-char {
  padding: 10px;
  background: #000;
  color: #fff;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://openexchangerates.github.io/accounting.js/accounting.min.js"></script>
  <section class="payment-numpad">
   <div class="col-tendered edit" data-value=""></div>
   <!--<div>Input Value: <span class="value"></span></div>-->
   <table>
    <tr>
     <td class="number-char" data-action="1">1</td>
     <td class="number-char" data-action="2">2</td>
     <td class="number-char" data-action="3">3</td>
    </tr>
    <tr>
     <td class="number-char" data-action="4">4</td>
     <td class="number-char" data-action="5">5</td>
     <td class="number-char" data-action="6">6</td>
    </tr>
    <tr>
     <td class="number-char" data-action="7">7</td>
     <td class="number-char" data-action="8">8</td>
     <td class="number-char" data-action="9">9</td>
    </tr>
    <tr>
     <td class="number-char" data-action="0">0</td>
     <td class="number-char operator" data-action=".">.</td>
    </tr>
   </table>
  </section>

Use precision to set fixed value after decimal

var precision = 2;
$('.col-tendered.edit').text(accounting.formatNumber(parseFloat(tendered), precision));

But how can I make work without resetting if I double clicked the decimal? — leonardeveloper, Jul 04 '18 at 01:57
How can I limit the input though? Like the parameter 3 in your example. Then after that user won't be able to add number — leonardeveloper, Jul 04 '18 at 08:10
Since I have a backspace in my numpad and when clicked it will remove the last item in the value — leonardeveloper, Jul 04 '18 at 08:57
Updated, for backspace issue please put another question and provide full code — Jagjeet Singh, Jul 04 '18 at 10:10
It's still adding value when numbers are clicked? I just want to limit it to 2 decimal places. — leonardeveloper, Jul 04 '18 at 11:32
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/174375/discussion-between-leonardeveloper-and-jagjeet-singh). — leonardeveloper, Jul 05 '18 at 03:01

How to add decimal point to decimal number in accounting.js?

2 Answers2