javascript - How to show OpenClosed based on time records with an html class - Stack Overflow

admin管理员组

文章数量:1405141

I'm trying to display Open or Closed based on a pany'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:

Thanks!

I'm trying to display Open or Closed based on a pany'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!

• javascript
• wordpress
• html
• datetime

Share Improve this question Follow asked Apr 26, 2016 at 15:44 lostInTheTetonslostInTheTetons 1,22211 gold badge1414 silver badges2323 bronze badges 5

• Are you open to using a library like date.js? It would make the task a lot easier (see this question) – damo-s Commented Apr 26, 2016 at 16:07
• Yes I would be.. How would I go about using it though? – lostInTheTetons Commented Apr 26, 2016 at 16:20
• Or is there a way to do this within PHP? – lostInTheTetons Commented Apr 26, 2016 at 16:23
• 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 ing up but will probably take a PHP approach. If you're fortable with Wordpress/PHP I would suggest giving that a shot and ing back here and posting another question when/if you get stuck. – damo-s Commented Apr 26, 2016 at 16:34
• I would be fortable 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 stackoverflow./questions/36870721/… – lostInTheTetons Commented Apr 26, 2016 at 16:41

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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./ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare./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.

本文标签： javascriptHow to show OpenClosed based on time records with an html classStack Overflow