jquery - show / hide div depending on day and time

Question

I am trying to show a specific div depending on the day and time.

So if the Day is between Monday - Friday and the Time is between 9am - 5:30pm,

then it will show div = class.open

if before or after that time, it will show div = class.closed

I have the following code that works to show the .open div when open, Monday-Friday 9am to 5pm. And it will show the .closed div from 0am to 9am. But I need it to show the closed div anytime it is outside of Monday-Friday 9am-5pm.

So I have 2 questions:

1. How do I have the .closed div show whenever it is not Monday-Friday 9am to 5pm?

2. How can I add minutes in, like open 8:30am to 5:30pm?

CODE

<div class="hours">We are OPEN</div>
<div class="closed">We are CLOSED</div>
$(document).ready(function () {

    var d = new Date();
    var dayOfWeek = d.getDay();
    var hour = d.getHours();

    // open hours Monday - Friday 9am - 5:pm = open
    if (dayOfWeek === 6 || dayOfWeek === 0 || hour <= 9 || hour >= 17) {
        $('.hours').hide();
    }
    // closed any other time than above * working from 0am -9am but none other
    if (dayOfWeek === 6 || dayOfWeek === 0 || hour <= 0 || hour >= 9) {
        $('.closed').hide();
    }


});

Here is the example: JSFiddle

Answer 1

Compare the getTime()'s of the dates specified.

The below code sets Opening Time and Closing Time of the current day and checks whether the current time is between those two time stamps.

var Now = new Date(),
  CurrentDay = Now.getDay(),
  OpeningTime = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 8, 30),
  ClosingTime = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 17, 30),
  Open = (Now.getTime() > OpeningTime.getTime() && Now.getTime() < ClosingTime.getTime());

if (CurrentDay !== 6 && CurrentDay !== 0 && Open) {
    $('.openstatus').toggle();
}

.hours {
  display:none;  
}

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

Answer 2

Thanks to all that helped. @gibberish, great answer thanks. @Jamie, thanks for the detailed info and script rewrite. works perfect.

I added the below so that it may help someone in the future looking for this answer and why it works/ how to modify it.

CODE

var Now = new Date();
var CurrentDay = Now.getDay();
// opening time - 24 hours so 9:30am is 9, 30
var OpeningTime = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 11, 36);
// closing time - 24 hours so 5:30pm is 17, 30
var ClosingTime = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 17, 30);
var Open = (Now.getTime() > OpeningTime.getTime() && Now.getTime() < ClosingTime.getTime())
// days 0.sun 1.mon 2.tues 3.wed 4.thur 5.fri 6.sat 
// CurrentDay !== 0 && the # is the day to eclude, so if I want to be closed on Sat6, Sun0, Wed3
// CurrentDay !== 6 && CurrentDay !== 0 && CurrentDay !== 3 && Open
if (CurrentDay !== 0 && CurrentDay !== 6 && Open) {
    $('.openstatus').toggle();
}

.hours {display:none;}

<div class="hours openstatus">We are OPEN</div>
<div class="closed openstatus">We are CLOSED</div>

Answer 3

Building on Lucas' answer, this is a simple addition to allow for minutes:

jsFiddle Demo

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 <= 17){
    if (hour=='9' && mins < '30'){
        status = 'closed';
    }else if (hour=='17' && mins > '30'){
        status = 'closed';
    }else{
        status = 'open';
    }
}else{
    status = 'closed';
}

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

Answer 4

if (dayOfWeek !== 6 && dayOfWeek !== 0 && hour >= 9 && hour < 17) {
    $('.hours').show();
    $('.closed').hide();
}
else {
    $('.hours').hide();
    $('.closed').show();
}

Consider using moment.js, IDs instead of classes and a timed refresh.