How to display 2 digits numbers of time left [countdown jquery] ?

My code will show

66days7hours6minutes2seconds

but I want to display 2 digits number e.g.

66days07hours06minutes02seconds

how to do that ?

/

How to display 2 digits numbers of time left [countdown jquery] ?

My code will show

66days7hours6minutes2seconds

but I want to display 2 digits number e.g.

66days07hours06minutes02seconds

how to do that ?

http://jsfiddle/D3E9G/

• javascript
• jquery
• css

• possible duplicate of javascript format number to have 2 digit – OpenStark Commented Aug 5, 2014 at 8:31

2 Answers 2

You can append the leading zeroes, and then use substr to cut the string to the required length:

day = ("00" + day).substr(-2);            
hour = ("00" + hour).substr(-2);            
minute = ("00" + minute).substr(-2);            
second = ("00" + second).substr(-2);

The -2 parameter means that you want to take the 2 characters from the end of the string.

Working example:

(function($) {
  $.fn.countdown = function(options) {
    // default options
    var defaults = {
      attrName: 'data-diff',
      tmpl: '<span class="hour">%{h}</span><span class="minute">%{m}</span>minutes<span class="second">%{s}</span>seconds',
      end: 'has ended',
      afterEnd: null
    };
    options = $.extend(defaults, options);

    // trim zero
    function trimZero(str) {
      return parseInt(str.replace(/^0/g, ''));
    }
    
    // convert string to time
    function getDiffTime(str) {
      var m;
      if ((m = /^(\d{4})[^\d]+(\d{1,2})[^\d]+(\d{1,2})\s+(\d{2})[^\d]+(\d{1,2})[^\d]+(\d{1,2})$/.exec(str))) {
        var year = trimZero(m[1]),
          month = trimZero(m[2]) - 1,
          day = trimZero(m[3]),
          hour = trimZero(m[4]),
          minute = trimZero(m[5]),
          second = trimZero(m[6]);
        return Math.floor((new Date(year, month, day, hour, minute, second).getTime() - new Date().getTime()) / 1000);
      }
      return parseInt(str);
    }
    
    // format time
    function format(diff) {
      var tmpl = options.tmpl,
        day, hour, minute, second;
      day = /%\{d\}/.test(tmpl) ? Math.floor(diff / 86400) : 0;
      hour = Math.floor((diff - day * 86400) / 3600);
      minute = Math.floor((diff - day * 86400 - hour * 3600) / 60);
      second = diff - day * 86400 - hour * 3600 - minute * 60;

      day = ("00" + day).substr(-2);
      hour = ("00" + hour).substr(-2);
      minute = ("00" + minute).substr(-2);
      second = ("00" + second).substr(-2);

      tmpl = tmpl.replace(/%\{d\}/ig, day)
        .replace(/%\{h\}/ig, hour)
        .replace(/%\{m\}/ig, minute)
        .replace(/%\{s\}/ig, second);
      return tmpl;
    }
    
    // main
    return this.each(function() {
      var el = this,
        diff = getDiffTime($(el).attr(options.attrName));

      function update() {
        if (diff <= 0) {
          if (options.afterEnd) {
            options.afterEnd();
          }
          return;
        }
        $(el).html(format(diff));
        setTimeout(function() {
          diff--;
          update();
        }, 1000);
      }
      update();
    });
  };
})(jQuery);

$(function() {
  $('.J_countdown2').countdown({
    tmpl: '<span>%{d}</span>days<span>%{h}</span>hours<span>%{m}</span>minutes<span>%{s}</span>seconds'
  });
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="J_countdown2" data-diff="5766998"></div>

Try this

if (day < 10) day = "0" + day;
if (hour < 10) hour = "0" + hour;
if (minute < 10) minute = "0" + minute;
if (second < 10) second = "0" + second;

DEMO