Nicolas Papaconstantinou Nicolas Papaconstantinou - 4 months ago 37
Javascript Question

How to hide a div on Sunday (opening hours on javascript)

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>




Answer

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() === 5 || da.getDay() === 3 ){ //saturday [5] 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)){ //
    $(".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>&nbsp;&nbsp; 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>&nbsp;&nbsp;Shop is closed</span>

Here is the solution, notice Wednesday and Saturday shop has different opening hours