How to hide/show a section based on Time Of Day?

Hi there!

I am trying to see how I can dynamically hide/show a section based on the time of the day?

Use case:

When my sales reps are done working during the day at 5PM, I want to show a section with a coupon code on our website. But when they’re active during the day, I do not want this section with the coupon code to show up.

That way we’re closing that late-night google ad traffic that’s ready to buy but can’t talk to someone from the company at the moment.

Our website is: Our Website - Music Distribution & Music Marketing Industry

I’ve spent hours today searching through this forum with no luck, a lot about cms visibility conditions but not for a section or div block.

I can probably get it done with some javascript or css but wanted to not load the site up with too much custom code.


Thank you! Really appreciate any comment at all on this as I embark down the narrow hole of custom code snippets on the internet tonight. LMAO

  • Daniel

hi @d-mastro and welcome, as you have mentioned you can achieve this with JS/CSS and here a simple example that can give you an idea how to

// get your element with its ID
const myElement = document.querySelector("#elementID") 
// get current hour (24)
let time = new Date().getHours()

// if time is greater than 5PM (17) 
if (time > 17){
  // remove class hidden
  myElement.classList.remove("hidden")
  //console.log("VISIBLE IS TRUE")
}else{
  // add class hidden
  myElement.classList.add("hidden");
  //console.log("VISIBLE IS FALSE")
}
.hidden{
   display: none;
}

I do not know exact case and conditions, so code can easily get more complex but like I have mentioned it is just one possible idea how to solve it.

1 Like

@Stan 's answer is perfect, except that the getHours() method returns the hour of day in the visitors timezone. Since @d-mastro wants to hide it during the sales team’s timezone, I would recommend using ISO time (which is in UTC) and doing the math for your timezone.

let time = new Date().getUTCHours()
// 9AM EDT is 13 in UTC and 5PM EDT is 21
if(time >= 21 || time < 13) {
  // remove class hidden
  myElement.classList.remove("hidden")
  //console.log("VISIBLE IS TRUE")
}else{
  // add class hidden
  myElement.classList.add("hidden");
  //console.log("VISIBLE IS FALSE")
}
2 Likes

hi @JudoHacker I have missed part of sales teams to be in different time zones and my suggestion was that sales HQ team is in one place (city/state/timezone). Now I have looked on website and I see that it is US based site where is more timezones than in whole Europe :wink: (just kidding) So it make sense but this mean that code will be more complex to show all coupons on website at same time as there will be big difference in US timezones 5PM. Anyway good point to think about to set proper logic to set universal time to show all coupons at the same time or showing coupons based on sales teams local timezone .

Need to deal with complicated timezone data? I recommend day.js and its timezone plugin → GitHub - iamkun/dayjs: :alarm_clock: Day.js 2KB immutable date-time library alternative to Moment.js with the same modern API

2 Likes