<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<style type="text/css">
#days{
font-family: 'Raleway', sans-serif;
font-size: 20px;
display: table;
width:100%;
padding-left: 10px;
padding-right: 10px;
}
.day__row{
display: table-row;
}
.day__label{
font-weight: normal;
text-align: left;
vertical-align: top;
display:table-cell;
padding-top: 10px;
padding-bottom: 20px;
border-bottom: solid 1px;
}
.hours__slots{
text-align: right;
vertical-align: top;
display:table-cell;
padding-top: 10px;
padding-bottom: 20px;
border-bottom: solid 1px;
}
.open-style {
font-weight: bold;
color:#3f9118;
}
</style>
</head>
<div id="days" >
<div id="day_monday" class="day__row">
<div class="day__label">Lundi : </div>
<div class="hours__slots"> </div>
</div>
<div id="day_tuesday" class="day__row">
<div class="day__label">Mardi : </div>
<div class="hours__slots"> </div>
</div>
<div id="day_wednesday" class="day__row">
<div class="day__label" >Mercredi : </div>
<div class="hours__slots"> </div>
</div>
<div id="day_thursday" class="day__row">
<div class="day__label" >Jeudi :</div>
<div class="hours__slots"> </div>
</div>
<div id="day_friday" class="day__row">
<div class="day__label" >Vendredi : </div>
<div class="hours__slots"> </div>
</div>
<div id="day_saturday" class="day__row">
<div class="day__label" >Samedi : </div>
<div class="hours__slots"> </div>
</div>
<div id="day_sunday" class="day__row">
<div class="day__label" >Dimanche : </div>
<div class="hours__slots"> </div>
</div>
</div>
<script>
const closedText = "Fermé";
const openTimes =
[
{ day: "monday", openTimes: [{start: {hours:9, minutes: 00}, stop: {hours:23, minutes: 0}}]},
{ day: "tuesday",openTimes: []},
{ day: "wednesday", openTimes: [{start: {hours:9, minutes: 0}, stop: {hours:23, minutes: 0}}]},
{ day: "thursday", openTimes: [{start: {hours:9, minutes: 0}, stop: {hours:23, minutes: 0}}]},
{ day: "friday", openTimes: [{start: {hours:9, minutes: 0}, stop: {hours:23, minutes: 0}}]},
{ day: "saturday", openTimes: [{start: {hours:9, minutes: 0}, stop: {hours:23, minutes: 0}}]},
{ day: "sunday", openTimes: [{start: {hours:9, minutes: 0}, stop: {hours:23, minutes: 0}}]},
];
const closeDates = [];
const date = new Date();
//const date = new Date("2020/03/05 22:00:00");
$(document).ready(function() {
const dayOfWeek = getDayOfWeek(date);
openTimes.forEach(day => {
let html = '';
let open = false;
if(dayOfWeek == day.day && isClosedDate(date)){
html = '';
}
else if(day.openTimes.length > 0) {
for (let i = 0; i < day.openTimes.length; i++) {
const time = day.openTimes[i];
if(dayOfWeek == day.day){
var startTime= new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.start.hours, time.start.minutes, 0 );
var stopTime= new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.stop.hours, time.stop.minutes, 0 );
if(date >= startTime && date<stopTime){
open = true;
}
}
html+= (open ?'<div class="open-style">': '<div>') + getTime(time)+ '</div>';
}
}
else{
html = closedText;
}
if(open){
$("#day_"+day.day+ " .day__label").addClass("open-style");
} else {
$("#day_"+day.day+ " .day__label").removeClass("open-style");
}
$("#day_"+day.day+ " .hours__slots").html(html);
});
});
function getTime(val) {
return format(val.start.hours)+ ':'+ format(val.start.minutes) + ' - ' + format(val.stop.hours)+':'+ format(val.stop.minutes);
}
function format(val) {
if(val<10){
return '0'+val;
}
return ''+val;
}
function isClosedDate(date){
for (let i = 0; i < closeDates.length; i++) {
const closedDate = new Date(closeDates[i]);
if(closedDate.getFullYear() == date.getFullYear()
&& closedDate.getMonth() == date.getMonth()
&& closedDate.getDate() == date.getDate()){
return true;
}
}
return false;
}
function getDayOfWeek(date) {
const day = date.getDay();
switch (day){
case 1: return "monday";
case 2: return "tuesday";
case 3: return "wednesday";
case 4: return "thursday";
case 5: return "friday";
case 6: return "saturday";
case 0: return "sunday";
}
}
</script>
