The Divi Theme's countdown module allows you display a running timer which counts down to a given date and time. By default, the timer shows leading zeros on its numbers. Here's how you can remove those leading zeros.
Remove the Leading Zero on the Days
The number of days remaining is always shown with 3 digits, like so:
If the event is close (i.e within 100 days), the leading zero on the days is unnecessary and looks a bit clumsy. To sharpen things up, we can remove the leading zero if present, to get something like this:
Removing the Leading Zero on the Days with Divi Booster
Divi Booster has an option to remove the leading zero on the Day(s) part of the countdown timer. You will find it at:
Divi > Divi Booster > Modules > Countdown > Hide Leading Zero on Days
To activate it, simply check the box and save the settings.
Removing the Leading Zero on the Days with jQuery
The following jQuery code can be used to to remove the leading zero if present:
<script>
jQuery(function($){
var olddays = $('.et_pb_countdown_timer .days .value');
// Clone the days and hide the original.
// - Wraps new days element in a span to prevent Divi from updating it
olddays.each(function(){
var oldday = $(this);
oldday.after(oldday.clone());
oldday.next().wrap('<span></span>');
}).hide();
// Update the clone each second, removing the trailing zero
(function update_days() {
olddays.each(function(){
var oldday = $(this);
var days = oldday.html();
if (days.substr(0,1) == '0') { days = days.slice(1); }
oldday.next().find('.value').html(days);
});
setTimeout(function(){ update_days(); }, 1000);
})()
});
</script>Related Post: Adding JavaScript / jQuery to Divi.
Remove all Leading Zeros
If you'd like to remove the leading zeros on all the values in the countdown timer, you can do so with the following jQuery code:
<script>
jQuery(function($){
var oldvals = $('.et_pb_countdown_timer .value');
// Clone the vals and hide the original.
// - Wraps new vals element in a span to prevent Divi from updating them
oldvals.each(function(){
$(this).after($(this).clone()).next().wrap('<span></span>');
}).hide();
// Update the clones each second, removing the trailing zeros
setInterval(function () {
oldvals.each(function(){
var oldval = $(this);
var val = oldval.html();
val = trim_leading_zeros(val);
oldval.next().find('.value').html(val);
});
}, 250);
function trim_leading_zeros(str) {
if ((str.length > 1) && (str.substr(0,1) === '0')) {
return trim_leading_zeros(str.slice(1));
}
return str;
}
});
</script>Here's an example of the result of applying this code:
Troubleshooting
Both original and zero-less countdown timers are showing
Some plugins (such as Divi Timer Pro) or custom code may cause the original version of the countdown timer to show above the version with the zeros removed. In this case, you should be able to force the original version of the countdown timer to be hidden by adding this CSS code to your site:
.et_pb_countdown_timer .section.values > p.value {
display: none !important;
}Related Post: Adding CSS to the Divi Theme
I used this code and it made my background color disappear on the counter. I then deleted the code from everywhere and my background color is still being pulled. What happened?
Hey Phil, sorry this happened. There's nothing in the code that touches the background color, so it sounds like there must have been a conflict somewhere or some thing not right in how the code was added. I see you've got a different countdown timer set up now. If you are able to recreate the problem, e.g. on a test page, I'll be happy to take a look and see if I can figure out where the problem lies. Thanks!
Oops, I pasted it wrong! Please delete my previous comment :)
I'm glad you got it working, Jillian. I've deleted your earlier comment. Thanks!
Hi Dan, very intersting article. Would it be possible to modify the labels (days, hours, etc) instead of just hiding it?
Hi Max, I've just put up a post explaining how to do it. Hope it helps!
https://divibooster.com/change-the-divi-countdown-timer-labels/
Hi dan,
I've tried adding your code but it still wont remove the leading (00)'s am I doing something wrong?
Hi mary, I took a look at the site linked in your comment and it looks like you've found another countdown solution, right? If you're still trying to remove the leading zeros on the Divi countdown module, is there any change you can send me a link to the page you're working on. My guess would be that something was preventing the JavaScript from running, but I wouldn't be able to say for sure without taking a look. Thanks!
Hi! My countdown timer only shows 000:00:00:00, even though I chose a date and time. Do you have any clues how to solve this?
Hi Stefan, the first thing I'd check is that the date is correct – a date in the past would display the zeros you're seeing. If that isn't the problem, try clearing any caches on your site and your browser history. If that still doesn't help, I'd suspect a JavaScript issue… something might be blocking Divi's JavaScript from loading. If you want to drop me a link to the page you're working on I'll be happy to take a look. Thanks!
Can I add jquery code to a specific Divi module or page? Instead of the theme-header at your linked post suggests?
Hi Kris, Yes, you can. If you put it in a code module (surrounded by <script> and </script> tags) then it will apply only on the page (or pages) you add that code module to.
Dan, you Legend!
Hi Dan. I have a custom color set. When I apply this setting on Divi Booster it makes my "Day" numbers default to black while my other numbers are remain the custom color.
I have corrected this with CSS .days.section.values p { color: blue; }
But perhaps in a future update you could make it inherit the custom color automatically?
Hi James, I'm glad you were able to get it working. The next version of Divi Booster (2.4.3) includes an update to this feature, making it inherit the custom styles automatically. I've updated the post with the new code, as well. Thanks!
Awesome, just installed the new update. Thanks for being on the ball! great plugin!
You're very welcome, James. Cheers!
Hi Dan, I've added your code, and nada. could you see what's going on on this page? http://www.bayleybulletin.com/the-2017-seton-spring-quarter-easter-short-story-contest/
Hi Dominic, I think the styles (for .contesttimer) in your Custom CSS are overriding the effect of my fix.
Briefly, my code hides the "p" tag containing the day count with zeros and adds in a new "p" tag without the zeros, so the html:
<div class="days section values" data-short="Day" data-full="Day(s)">
<p class="value">019</p>
<p class="label">Day(s)</p>
</div>
Becomes
<div class="days section values" data-short="Day" data-full="Day(s)">
<p class="value" style="display: none;">019</p>
<p class="">19</p>
<p class="label">Day(s)</p>
</div>
However in you're custom CSS you have:
.contesttimer .days .value {display:block!important;}
.contesttimer .days .value + p {display:none!important;}
Which hides the new "p" tag and forces the display of the old one (with the zeros). If you remove these lines from your custom CSS, the new days (with no zero) should be displayed. However, the styles you have added are applying to the old days only, so you probably want to add the following to style the new one:
.contesttimer .days p:nth-child(2) {
letter-spacing: 6px!important;
background-color: #dc2d43!important;
padding: 30px 6px !important;
padding-left: 11px !important;
width: 89px !important;
margin-bottom:10px!important;
font-family: Oswald;
}
.contesttimer .days p:nth-child(2) {
width: 129px !important;
}
Hope that helps!
this is awesome! Thanks Dan. :)
I added the code to the section Add code to the (good for tracking codes such as google analytics) in divi options -> integration.
Doesnt work.
What did I do wrong?
Hi Ken, did you add <script> before the code and </script> after it? If you're able to send me a link, I might be able to spot the problem.
Thanks Dan, Just added this to my first divi site as the 3 digits was bugging me. Took less than a minute!
where do i insert this code ?
Hi Ben, there are a couple of options, explained in this post:
https://divibooster.com/adding-javascript-and-jquery-to-the-divi-theme/