CountEverest - Left Hand Zeros Demo

The leftHandZeros setting controls whether numbers are padded with leading zeros (e.g., "01" vs "1"). By default, it's enabled (true) for consistent formatting, but you can disable it for a more minimal look.

Default Theme Comparison

With Leading Zeros (default)

<div class="ce-countdown" data-ce-datetime="2024-12-31 23:59:05" data-ce-left-hand-zeros="true"></div>

Without Leading Zeros

<div class="ce-countdown" data-ce-datetime="2024-12-31 23:59:05" data-ce-left-hand-zeros="false"></div>

Theme 1 (Grid) Comparison

With Leading Zeros

<div class="ce-countdown ce-countdown--theme-1" data-ce-datetime="2024-12-31 23:59:05" data-ce-left-hand-zeros="true"></div>

Without Leading Zeros

<div class="ce-countdown ce-countdown--theme-1" data-ce-datetime="2024-12-31 23:59:05" data-ce-left-hand-zeros="false"></div>

Theme 6 (Colorful Blocks) Comparison

With Leading Zeros

<div class="ce-countdown ce-countdown--theme-6" data-ce-datetime="2024-12-31 23:59:05" data-ce-left-hand-zeros="true"></div>

Without Leading Zeros

<div class="ce-countdown ce-countdown--theme-6" data-ce-datetime="2024-12-31 23:59:05" data-ce-left-hand-zeros="false"></div>

Theme 10 (Flip Clock) Comparison

With Leading Zeros

<div class="ce-countdown ce-countdown--theme-10" data-ce-datetime="2024-12-31 23:59:05" data-ce-left-hand-zeros="true"></div>

Without Leading Zeros

<div class="ce-countdown ce-countdown--theme-10" data-ce-datetime="2024-12-31 23:59:05" data-ce-left-hand-zeros="false"></div>

JavaScript API Usage

You can also control leading zeros when manually initializing:

// With leading zeros (default)
new CountEverest(element, {
  year: 2024,
  month: 12,
  day: 31,
  leftHandZeros: true  // "01", "02", "03"...
});

// Without leading zeros
new CountEverest(element, {
  year: 2024,
  month: 12,
  day: 31,
  leftHandZeros: false  // "1", "2", "3"...
});