How to format a number to always be double digits before the decimal

Question

I have built a countdown clock and I need the minutes and seconds to always display double digits. Currently the clock works perfect but it only displays single digits when the seconds and minutes drop below 2 digit number. (like anything below 10.) is there a jQuery .format() or something like this to format my output numbers?

Here is my JS:

// Set the date we're counting down to
    var countDownDate = new Date("March 27, 2019 00:00:00").getTime();

// Update the count down every 1 second
    var x = setInterval(function() {

// Get todays date and time
    var now = new Date().getTime();

// Find the distance between now an the count down date
    var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
 // Output the result in an element with id="demo"
     document.getElementById("countdown").innerHTML = '<div class="timer-wrapper"><div class="time">' + days + ':</div><span class="text">DAYS</span></div><div class="timer-wrapper"><div class="time">' + hours + ':</div><span class="text">HOURS</span></div><div class="timer-wrapper"><div class="time">' +
            minutes + ':</div><span class="text">MINUTES</span></div><div class="timer-wrapper"><div class="time">' + seconds + '</div><span class="text">SECONDS</span></div>';

  // If the count down is over, write some text 
     if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
        }
    }, 1000);

and here is my HTML:

<div class="countdown-timer-wrapper">
     <div class="timer" id="countdown"></div>
</div>

Thanks in advance. :)

Possible duplicate of [How can I pad a value with leading zeros?](https://stackoverflow.com/questions/1267283/how-can-i-pad-a-value-with-leading-zeros) — Laura, May 14 '18 at 14:06

score 1 · Accepted Answer · answered May 14 '18 at 14:07

Use ("0" + number).slice(-2), to format the number

Try below code snippet

// Set the date we're counting down to
    var countDownDate = new Date("March 27, 2019 00:00:00").getTime();

// Update the count down every 1 second
    var x = setInterval(function() {

// Get todays date and time
    var now = new Date().getTime();

// Find the distance between now an the count down date
    var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
    var days =  Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours =  ("0" +Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).slice(-2);
    var minutes = ("0" + Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))).slice(-2);
    var seconds =  ("0" + Math.floor((distance % (1000 * 60)) / 1000)).slice(-2);
 // Output the result in an element with id="demo"
     document.getElementById("countdown").innerHTML = '<div class="timer-wrapper"><div class="time">' + days + ':</div><span class="text">DAYS</span></div><div class="timer-wrapper"><div class="time">' + hours + ':</div><span class="text">HOURS</span></div><div class="timer-wrapper"><div class="time">' +
            minutes + ':</div><span class="text">MINUTES</span></div><div class="timer-wrapper"><div class="time">' + seconds + '</div><span class="text">SECONDS</span></div>';

  // If the count down is over, write some text 
     if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
        }
    }, 1000);

<div class="countdown-timer-wrapper">
     <div class="timer" id="countdown"></div>
</div>

THIS IS GREAT! Thanks so much! Now is there anyway to ensure my days will also show double digits once that drops below 10 days? I know currently it shows 316 days and when I did the same format as you did on the hours, minutes, and seconds it cut off the 3 and displayed only 16 days. @programtreasures — Aries Azad, May 14 '18 at 14:14

How to format a number to always be double digits before the decimal

1 Answers1