How to show Open / Closed based on time entries using html class

Question

I am trying to display Open or Closed based on company time for this particular date using Javascript. I am using a Listify theme on WordPress that customers can list in their business. They have the opportunity to set working hours for each day of the week. I want to be able to use the data that is stored within the range, and then determine if the business is open or closed, and display this.

Here is the code that I still have:

<p class="business-hour" itemprop="openingHours" content="Monday 8am-17pm"> <span class="day">Monday</span> <span class="business-hour-time"> <span class="start">8:30 am</span> – <span class="end">5:30 pm</span> </span> </p> 

This is only for one day, but you should get this idea. I searched for hours to find something like this. All I can find is coding with specific watches already defined in Javascript. I want to be able to use classes to start and end to create open or closed. Is it possible? I would think so. I just can't do it right.

I'm doing it here, but it seems like I can’t understand anything: http://codepen.io/tetonhiker/pen/KzxRzg

Thanks!

Answer 1

I modified your code a bit using date.js :

http://codepen.io/anon/pen/VaGdBK

 var da = new Date(); document.getElementById("display").innerHTML = da.toDateString(); //gets the current time. //var d = new Date(); var x = document.getElementsByClassName("start")[0].innerText; var z = document.getElementsByClassName("end")[0].innerText; //var o = parseInt(x,10); //var c = parseInt(z,10); var startTime = Date.parseExact(x, "h:mm tt"); var endTime = Date.parseExact(z, "h:mm tt"); if (da.between(startTime, endTime)){ $(".open").show(); $(".closed").hide(); } else { $(".closed").show(); $(".open").hide(); } 

 .open, .closed { display: none; } 

 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script> <span class="day">Monday </span> <span class="start">8:30 am</span> - <span class="end">5:30 pm</span> <br> <span id="display"></span> <div class="open">Shop is open</div> <div class="closed">Shop is closed</div> 

I have not considered it enough, so I do not know how this works in relation to the time zone. You may need to tweak what I posted to accommodate this.

Also: a CSS rule has been added to avoid a brief flash of both open and closed display, until one of them is hidden by jQuery.