Countdown: Always Show Three Digits for the Number of Days (Using Leading Zeros)

[pyrmont]

I've been trying to work out if there is a way to force the daily counter clock face to have one or more leading zeros so that the the day 'column' (for want of a better word) always has three digits.

If you naturally count down from 100 days or more, a leading zero is displayed, but if your counter begins below 100, only two digits appear.

This is what it looks like if you count down from above 100 to below 100:

However, this is what it looks like if you count down from below 100:

Any suggestions would be much appreciated!

[pyrmont]

After looking a little more closely at the code, it looks like it might be possible to hack around in the digitize() or getDayCounter() functions to force an extra zero in the day column.

However, for my purposes, it was easy enough just to write some jQuery to add an extra zero if the timer was started with less than 100 days to go. In case it helps anyone else, here's my code:

callbacks = new Object();
callbacks.start = function() {
  if(difference < (3600 * 24 * 100)) {
    leading_zero = $('ul.flip').first().clone();
    leading_zero.find('li.flip-clock-active').removeClass('flip-clock-active');
    leading_zero.find('li.flip-clock-before').removeClass('flip-clock-before');

    $('span.days').after(leading_zero);
  }
}

clock  = $('.flip-counter').FlipClock(difference, {
  clockFace: 'DailyCounter',
  countdown: true,
  callbacks: callbacks
});