Opening hours - DIV depends on the day of the week and the hour

Question

I have a script that shows different div depending on the day of the week and the time of day. He works well. I need to modify it. I want to set different opening hours each day. How can I do this? Please help.

Example

Monday open from 8:00 to 16:00
Tuesday open from 8:00 to 16:00
Wednesday open from 8:00 to 18:00
Thursday open from 8:00 to 18:00
Friday open from 8:00 to 16:00
Saturday close
Sunday open from 8:00 to 13:00

My script:

var d = new Date();
var dayOfWeek = d.getDay();
var hour = d.getHours();
var mins = d.getMinutes();
var status = 'open';

if (dayOfWeek !== 6 && dayOfWeek !== 0 && hour >= 9 && hour <= 15){
    if (hour=='9' && mins < '00'){
        status = 'closed';
    }else if (hour=='15' && mins > '30'){
        status = 'closed';
    }else{
        status = 'open';
    }
}else{
    status = 'closed';
}

if (status=='open') {
    $('.hours').show();
    $('.closed').hide();
}else{
    $('.hours').hide();
    $('.closed').show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hours">We are OPEN</div>
<div class="closed">We are CLOSED</div>

Answer 1

You can construct an array to represent each day of the week, and include the open/close hour within it.

Also, I'd change your "status" variable to store a boolean, not a string, since it's effectively answering a "yes or no" question - why not just call it "open" and make its values true or false? Nit-picky, but this way is more correct. String comparisons are clunky.

var openHours = [
    {
        openHour: 8,
        openMinute: 0,
        closeHour: 13,
        closeMinute: 0
    },
    {
        openHour: 9,
        openMinute: 0,
        closeHour: 17,
        closeMinute: 30,
    },
    {
        openHour: 9,
        openMinute: 0,
        closeHour: 17,
        closeMinute: 30,
    },
    {
        openHour: 9,
        openMinute: 0,
        closeHour: 17,
        closeMinute: 30,
    },
    {
        openHour: 9,
        openMinute: 0,
        closeHour: 17,
        closeMinute: 30,
    },
    {
        openHour: 9,
        openMinute: 0,
        closeHour: 17,
        closeMinute: 30,
    },
    {
        openHour: -1,
        openMinute: -1,
        closeHour: -1,
        closeMinute: -1,
    }
];

var d = new Date();
var dayOfWeek = d.getDay();
var hour = d.getHours();
var mins = d.getMinutes();
var open = true;
var todayHours = openHours[dayOfWeek];

if (hour >= todayHours.openHour && hour <= todayHours.closeHour) {
    if ((hour==todayHours.openHour && mins < todayHours.openMinute) || (hour==todayHours.closeHour && mins > todayHours.closeMinute)) {
        open = false;
    } else {
        open = true;
    }
} else {
    open = false;
}

if (open) {
    $('.hours').show();
    $('.closed').hide();
} else {
    $('.hours').hide();
    $('.closed').show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hours">We are OPEN</div>
<div class="closed">We are CLOSED</div>

Answer 2

Use a two dimensional array

// Example days
var days = [[9, 15],[8, 14],[7, 13],[6,12],[5,11],[0,0],[0,0]];

A day with [0,0] will be considered as fully closed. And edit the if statement to

if (hour >= days[dayOfWeek][0] && hour < days[dayOfWeek][1]){ //..

Answer 3

You can put the schedule in an array and jsut check wich day are you on and check if the current time is between the start and end time into the array