I have an events website and would like to add a countdown ticker.
The ticker appears on my Events Collection page, and I would like it to countdown to the Event date and time - which is a date/time field with an added time picker.
Presumably I’ll need some JavaScript - I will continue to look for solutions online but if anybody has some experience getting a countdown working off a CMS Date/Time field then please let me know. Thanks
Glad you have found solution. As this forum is full of solutions for many different requests Next time try to use keyword “countdown” in search input of this forum and you will find many working examples.
So my countdown is working using the following embed (from Finsweet):
<script>
(function () {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
// Set the target date and time for the countdown (format: "MM/DD/YYYY HH:mm:ss")
const targetDateString = "{CMSDateField}";
const targetDate = new Date(targetDateString).getTime();
const updateCountdown = () => {
const now = new Date().getTime(), // Get the current date and time
distance = targetDate - now; // Calculate the time remaining until the target date
// Update the HTML elements with the remaining time
document.getElementById('days').innerText = Math.floor(distance / day);
document.getElementById('hours').innerText = Math.floor((distance % day) / hour);
document.getElementById('minutes').innerText = Math.floor((distance % hour) / minute);
document.getElementById('seconds').innerText = Math.floor((distance % minute) / second);
// Check if the target date has already passed
if (distance < 0) {
clearInterval(interval); // Stop the countdown timer
document.getElementById('days').innerText = '0';
document.getElementById('hours').innerText = '0';
document.getElementById('minutes').innerText = '0';
document.getElementById('seconds').innerText = '0';
// You can display an element at the end of the countdown with this ID
document.getElementById('todaymessage').style.display = 'block';
}
};
// Initial call to update countdown
updateCountdown();
// Update the countdown every second
const interval = setInterval(updateCountdown, 1000);
})();
</script>
I’m having trouble with the part commented: // Check if the target date has already passed
For example, I have an event that has the date of June 18th (today).
I was hoping that the countdown numbers would all show 0, and the todaymessage (which is set to display:none), would show as display:block.
What’s actually happening is the todaymessage is staying hidden, and the numbers are showing as negative:
I appreciate that this is more of a JS related question, and the answer may be obvious enough by looking at the code… but I assumed it would just work.
Hey!
Nice work getting that countdown working with Finsweet’s script - that’s already a solid setup. As for the logic bug, I’m not the best person to troubleshoot that part of the code, but I totally get the frustration when the behavior doesn’t match expectations.
Just in case you’re open to exploring another route - there are also third-party countdown widgets (like Elfsight’s Countdown Timer for Webflow) that let you handle all the timer settings visually. You set the end date, design, and optional messages - all without touching the code. Could be a simpler option if you’re looking to save time or avoid digging into JavaScript fixes.
Hope you find a setup that works smoothly!
Cheers,
Elfsight Team
