Based on this code: http://codepen.io/anon/pen/VaGdBK I try to show my opening hours of the store. Can anyone help me what code to use so the system will recognize when it's Sunday to change the status as closed? Also the working hours on Saturday and Wednesday are: 9:00-16:00.
var da = new Date();
document.getElementById("display").innerHTML = da.toDateString();
var d = new Date();
var n = d.getDay();
//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 if (d.getDay = 0){
$(".closed").show();
$(".open").hide();
}
else {
$(".closed").show();
$(".open").hide();
}
body{
padding:30%;
background:pink;
color: black;
}
.open, .closed {
display: none;
}
<span style="display:none;"><span class="day"> Monday</span>
<span class="start">8:30 am</span> -
<span class="end">5:30 pm</span>
<br>
<span id="display"></span>
</span>
<div class="open">Shop is open</div>
<div class="closed">Shop is closed</div>
<script>
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();
}
// how can I show the closed class on Sunday?
// How can I show the open class from 9:00 am to 19:00 pm?
</script>
</div>
First of all, the codepen example your working from has an error. If you press the JS settings button, you'll see that the source for Jquery is faulty: You need to add http: in front of it.
I've added comments next to the changes I've made to your code.
da.getDay() is the key.
var da = new Date(Date.now());
document.getElementById("display").innerHTML = da.toDateString();
var weekStartTime = document.getElementsByClassName("start")[0].innerText;
var weekEndTime = document.getElementsByClassName("end")[0].innerText;
var saturdayStartTime = document.getElementsByClassName("saterdayStart")[0].innerText;
var saturdayEndTime = document.getElementsByClassName("saterdayEnd")[0].innerText;
//da.getDay() returns a number sunday = 0, monday = 1,...
if (da.getDay() === 0) { //sunday, shop is closed
$(".closed").show();
$(".open").hide();
} else { //not sunday, look at opening hours
var startTime, endTime;
if (da.getDay() === 6) { //saturday opening hours
startTime = Date.parseExact(saturdayStartTime, "h:mm tt");
endTime = Date.parseExact(saturdayEndTime, "h:mm tt");
} else {// workweek openinghours
startTime = Date.parseExact(weekStartTime, "h:mm tt");
endTime = Date.parseExact(weekEndTime, "h:mm tt");
}
//now that we have aquired the correct opening hours, the div's can be set.
if (da.between(startTime, endTime)) {
$(".open").show();
$(".closed").hide();
} else {
$(".closed").show();
$(".open").hide();
}
}
Opening Hours:</br>
<span class="day">Monday </span>
<span class="start">8:30 am</span> -
<span class="end">5:30 pm</span>
</br>
<!-- I've added the opening hours for saturday -->
Saturday <span class="saterdayStart">9:00 am</span>
- <span class="saterdayEnd">16:00 pm</span>
</br>
</br>
Current time: <span id="display"></span>
<div class="open">Shop is open</div>
<div class="closed">Shop is closed</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
</div>
var da = new Date(Date.now());
document.getElementById("display").innerHTML = da.toDateString();
//gets the current time.
//var d = new Date();
var x = document.getElementsByClassName("start3")[0].innerText;
var z = document.getElementsByClassName("end3")[0].innerText;
var s = document.getElementsByClassName("sats")[0].innerText;
var e = document.getElementsByClassName("sate")[0].innerText;
var startTime = Date.parseExact(x, "h:mm tt"); //variables of working days
var endTime = Date.parseExact(z, "h:mm tt"); //variables of working days
var satwedstart = Date.parseExact(s, "h:mm tt"); //declare variables of wednesday and saturday
var satwedend = Date.parseExact(e, "h:mm tt"); //declare variables of wednesday and saturday
var da = new Date(Date.now());
if (da.getDay() === 0) { //sunday, shop is closed
$(".closed3").show();
$(".open3").hide();
}
else if (da.getDay() === 6 || da.getDay() === 3 ){ //saturday [6] or wednesday[3] shop has different opening hours
if(da.between(satwedstart, satwedend)){
$(".open3").show();
$(".closed3").hide();
}
else {
$(".closed3").show();
$(".open3").hide();
}
}
else if (da.between(startTime, endTime)){ // working days
$(".open3").show();
$(".closed3").hide();
}
else {
$(".closed3").show();
$(".open3").hide();
}
body{
background:pink;
}
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
<span class="day hide">Monday </span>
<span class="start3 hide">09:00 am</span>
<span class="end3 hide">07:00 pm</span>
<span class="sats hide">9:00 am</span>
<span class="sate hide">04:00 pm</span>
<span id="display" class="hide"></span>
<span style="padding-left:4%;" class="open3 w3-small"><i class="w3-round fa fa-circle-thin w3-green w3-text-green" aria-hidden="true"></i> Shop is open</span>
<span style="padding-left:4%;" class="closed3 w3-small "><i class="w3-round w3-text-red w3-red fa fa-circle-thin" aria-hidden="true"></i> Shop is closed</span>
Here is the solution, notice Wednesday and Saturday shop has different opening hours
</div>