CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mousebucks
Mousebucks

Reputation: 83

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

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>

Upvotes: 1

Views: 1446

Answers (3)

Bucket
Bucket

Reputation: 7521

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>

Upvotes: 1

user7979190
user7979190

Reputation:

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]){ //..

Upvotes: 2

Alejandro Maliachi Quintana
Alejandro Maliachi Quintana

Reputation: 373

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

Upvotes: 0

Related Questions