Come mostrare Aperto/Chiuso in base a record orari con una classe html

Question

Sto tentando di visualizzare Aperto o Chiuso in base all'ora di un'azienda per quella data specifica utilizzando Javascript. Sto usando un tema Listify su WordPress che i clienti possono elencare le loro attività. Hanno la possibilità di inserire il loro orario di lavoro per ogni giorno della settimana. Voglio essere in grado di utilizzare quei dati che sono memorizzati all'interno di una span e quindi determinare se l'attività è aperta o chiusa e mostrarla.

Ecco il codice che ho finora:

<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> 

Questo è solo per un giorno, ma si dovrebbe ottenere l'idea. Ho cercato dappertutto per ore per trovare qualcosa di simile. Tutto quello che posso trovare è la codifica con le ore specifiche già definite in Javascript. Voglio essere in grado di utilizzare le classi start e end per creare un open o closed. È possibile? Lo penserei. Non riesco a farlo correttamente.

Mi sono allenato qui, ma non riesco a capire nulla: http://codepen.io/tetonhiker/pen/KzxRzg

Grazie!

Answer 1

Ho modificato il codice un po ', facendo uso di 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>

non ho guardato in esso in modo sufficiente non lo so come funziona rispetto al fuso orario. Potrebbe essere necessario regolare ciò che ho postato per renderlo conto.

Inoltre: aggiunta una regola CSS per evitare che il breve flash di apertura e chiusura sia visualizzato prima che uno di essi sia nascosto da jQuery.