How to format currency and time in javascript

Question

I can not get my formatting of currency and time to work.

Currency is to return at least one integer to the left of the decimal and two to the right and comma:

non numeric (a, a1, a1.00) and 0 --> 0.00

1 --> 1.00

1.1 --> 1.10

9999 --> 9,999.00

I have:

$("#addCostpp").blur( function(){
    $("#addCostpp").val(validateCost($(this).val()));
});


function validateCost(cost_amount){
    return cost_amount.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/, '$1,$2$3')
}

Time is to return 00:00:

0 (or error e.g., a or aa) --> 00:00

1 --> 01:00

01 --> 01:00

01:0 --> 01:00 (or if the : is any non numeric e.g., 01;0 or 01L0)

0101 --> 01:01

010203 --> 01:02

$("#addTimeOpen").blur( function(){
    $("#addTimeOpen").val(validateTime($(this).val()));
});

function validateTime(timeString){
    var formatted = "";

    if (timeString.match(/^0/)){
        formatted = timeString.replace(/(\d{2})(\d{2})/, "$1:$2");
    }else{
        formatted = timeString.replace(/(\d{1})(\d{2})/, "0$1:$2");
    }

    //update
    return(formatted);
}

https://stackoverflow.com/questions/149055/how-to-format-numbers-as-currency-string — Matt, Mar 15 '20 at 04:25
For currency, there is [*Intl.NumberFormat*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat) and for time there is [*Intl.DateTimeFormat*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat). — RobG, Mar 15 '20 at 05:06

score 1 · Accepted Answer · answered Mar 15 '20 at 05:26

For your desire currency number output, you need to use the following methods,

new Intl.NumberFormat('en-IN', {minimumFractionDigits: 2})

As well as for your desire time format you need to use moment.js with following way,

moment('010203', 'H:mm:ss').format('HH:mm')

To format currency as per your desire output you need to use Intl.NumberFormat function with minimumFractionDigits = 2 parameter.

I added a code snipped for that, I formatted with your desire outputs on the following snipped.

var formatter = new Intl.NumberFormat('en-IN', {minimumFractionDigits: 2});

var input1 = document.getElementById('input1').innerHTML;
var input2 = document.getElementById('input2').innerHTML;
var input3 = document.getElementById('input3').innerHTML;


document.getElementById('result1').innerHTML = formatter.format(input1);
document.getElementById('result2').innerHTML = formatter.format(input2);
document.getElementById('result3').innerHTML = formatter.format(input3);


function formatTime( cTime ){
var formattedTime;
  if(cTime.length === 1 || cTime.length === 2){
    formattedTime = moment(cTime, 'H').format('HH:mm');
  }else if(cTime.length === 3 || cTime.length === 4){
    formattedTime = moment(cTime, 'H:mm').format('HH:mm');
  }else if(cTime.length > 4){
    formattedTime = moment(cTime, 'H:mm:ss').format('HH:mm');
  }
  return formattedTime;
}

var time1 = document.getElementById('time1').innerHTML;
var time2 = document.getElementById('time2').innerHTML;
var time3 = document.getElementById('time3').innerHTML;
var time4 = document.getElementById('time4').innerHTML;
var time5 = document.getElementById('time5').innerHTML;

document.getElementById('result_time1').innerHTML = formatTime(time1);
document.getElementById('result_time2').innerHTML = formatTime(time2);
document.getElementById('result_time3').innerHTML = formatTime(time3);
document.getElementById('result_time4').innerHTML = formatTime(time4);
document.getElementById('result_time5').innerHTML = formatTime(time5);

p{
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<p>
<span id="input1">1</span>  <br><span id="result1"></span>
</p>

<p>
  <span id="input2">1.1</span>  <br><span id="result2"></span>
</p>

<p>
<span id="input3">9999</span>  <br><span id="result3"></span>
</p>



<p>
  <span id="time1">1</span> <br> <span id="result_time1"></span>
</p>

<p>
  <span id="time2">01</span> <br> <span id="result_time2"></span>
</p>

<p>
  <span id="time3">01:0</span> <br> <span id="result_time3"></span>
</p>

<p>
  <span id="time4">0101</span> <br><span id="result_time4"></span>
</p>

<p>
  <span id="time5">010203</span> <br> <span id="result_time5"></span>
</p>

Including moment.js just to format time as hours and minutes seems like massive overkill. — RobG, Mar 15 '20 at 12:00

score 0 · Answer 2 · answered Mar 15 '20 at 12:23

The function names are misleading, they don't validate the value they just format it.

To format as currency, you can use Intl.NumberFormat either with or without the currency symbol. It can be used via toLocaleString:

[1, 10000, 1.23e4, 1.2].forEach(v => console.log(
  // With currency a symbol
  v + ' -> ' + v.toLocaleString('en',{style: 'currency', currency: 'JPY'}) + '\n' +
  // As number
  v + ' -> ' + v.toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2})
  )
);

To format the time as required is fairly straight forward using string methods:

function formatTime(v) {
  v = String(v).replace(/\D/g,'').padStart(2, '0').padEnd(4, '0');
  return v.substring(0,2) + ':' + v.substring(2,4);
}

['1','01','0101','010203','foobar', NaN].forEach(s => console.log(s + ' -> ' + formatTime(s)));

How to format currency and time in javascript

2 Answers2