How to show Open/Closed based on time records with an html class

Question

I'm trying to display Open or Closed based on a company's time for that specific date using Javascript. I'm using a theme Listify on WordPress which customers can list their businesses. They have the option to put in their business hours for each day of the week. I want to be able to use that data which is stored within a span and then determine if the business is open or closed and display that.

Here is the code I have so far:

<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 just for one day, but you should get the idea. I've been looking all over for hours to find something like this. All I can find is coding with the specific hours already defined within Javascript. I want to be able to use the classes start and end to create a the open or closed. Is this possible? I would think it is. I just can't seem to do it correctly.

I've been practicing here but can't seem to figure anything out: http://codepen.io/tetonhiker/pen/KzxRzg

Thanks!

Are you open to using a library like [date.js](http://www.datejs.com/)? It would make the task a lot easier (see [this question](http://stackoverflow.com/questions/9729484/convert-a-time-string-say-1205-pm-into-a-datetime-using-date-parse-in-javascr)) — damo-s, Apr 26 '16 at 16:07
Sure, I'll create an answer on how to do this using date.js. I'm actually going to be doing something similar for a client coming up but will probably take a PHP approach. If you're comfortable with Wordpress/PHP I would suggest giving that a shot and coming back here and posting another question when/if you get stuck. — damo-s, Apr 26 '16 at 16:34
I would be comfortable with doing it with PHP. I'm just stuck on getting it started. I can read/modify code better than creating my own unfortunately. I'm still learning though! Here is a link to my question asking for PHP http://stackoverflow.com/questions/36870721/how-to-show-open-closed-based-on-store-hours-in-php — lostInTheTetons, Apr 26 '16 at 16:41

score 5 · Accepted Answer · answered Apr 26 '16 at 17:17

5

I've modified your code a little, making use of 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 haven't looked into it sufficiently so I don't know how it works regarding the timezone. You might have to adjust what I've posted to account for that.

Also: added a CSS rule to avoid the brief flash of both open and closed being displayed before one of them is hidden by jQuery.

answered Apr 26 '16 at 17:17

damo-s

1,008
7
16

Thank You! I'm getting it to work on my theme.. except it's showing up on all days with hours. Any way to set it to show only on the current day of the week? – lostInTheTetons Apr 26 '16 at 17:39
Might be something better to do on the PHP side, but you can do the following: add a `data-day` attribute to each span displaying the day and give each a value from 0 to 6 (0 being Sunday.) Then you can use the native `getDay()` and compare if the value is equal to the `data-day` attribute value to show either open or closed div like so: `if (da.getDay() === $('.day').data('day')) { // do your showing/hiding here }` – damo-s Apr 26 '16 at 18:32
Sorry for the late response, thank you for all your help btw. How can I give each day a value of 0 - 6? – lostInTheTetons May 11 '16 at 15:54
Just hard code it like so: `Monday` – damo-s May 11 '16 at 16:17
Oh, I see that won't do. Try this: http://codepen.io/anon/pen/jqJxwe wrapping each set of day and start and end times in a div with a hard coded `data-day` attribute (could also be a class named day1, day2 etc. if you want instead.) Then we can get the correct start and end times for the showing and hiding by querying the appropriate day. Hope that makes sense. – damo-s May 11 '16 at 17:55

How to show Open/Closed based on time records with an html class

1 Answers1