How to build a D-H-M-S countdown (days, hours, minutes, seconds) to a target date in the new Glide editor?

Ask for Help
1

Hi all,
I’d like to show a live countdown to a target Date/Time (e.g., next vacation) as “146 days 14 h 03 m 05 s” — i.e., days + remainder hours/minutes/seconds (0–23 / 0–59 / 0–59), not totals.

My setup

  • Table: Users
  • Target column: countdown_target (Date/Time)
  • I created four Date Difference columns (Start = Current time, End = countdown_target) with units days / hours / minutes / seconds and Precision = 0.
  • I can template them, but hours/minutes/seconds are totals (e.g., 3518 hours), so they don’t match the rounded days.
1 Like
2

My suggestion would be to pass the end date into a Custom AI component and have it countdown from the current date and time. You should only need the end date to make it work. The reason I suggest that is because any date math in the table will only update approximately every 10 seconds, so it would not lead to a smooth countdown, whereas the custom AI component uses javascript that will countdown more like you would expect. And you wouldn’t need any of your extra computed columns. Just your end date and time.

Here is something I’ve created in the past using the custom AI component to give you an idea.

3 Likes
3

Date difference always gives totals, so hours/minutes/seconds won’t “reset” after the days are taken out. To get the format you want you need to first get the total seconds difference then break it down using computed columns:

Days = floor(totalSeconds / 86400)
Hours = floor((totalSeconds % 86400) / 3600)
Minutes = floor((totalSeconds % 3600) / 60)
Seconds = totalSeconds % 60

You can then template them into D H M S so they line up correctly instead of showing cumulative totals.

1 Like