Show/hide div based on time of day jquery

Question

I've got some code that I thought should work to show or hide two divs depending on the time of day. It currently shows the "closed" div despite the time being later than it is - am I missing anything? The website is running on only two machines so it only needs to get the time set on them.

$(document).ready(function () {
var d = new Date();
var time = d.getHours() + ":" + d.getMinutes();

if (time > ("08:29") && time < ("16:29")) {
    $('.hours').show();
    $('.closed').hide();
}
else {
    $('.hours').hide();
    $('.closed').show();
    }
});

Answer 1

var time = new Date();

add two variables:

var startTime = new Date().setHours(8,29);
var endTime = new Date().setHours(16,29);

And in if statement use this expression

if (time.getTime() > startTime && time.getTime() < endTime) {

Answer 2

getHours() and getMinutes() on the date object doesn't zero pad. So if it's 08:03, that'll be 8:3.

Perhaps look into using MomentJS where you can call format on a date and parse it to the desired format.

Edit: as a quick fix, use d.toISOString().split('T')[1]

Answer 3

You don't compare the time using strings. You need two date objects to compare them.

The easier way is to create two more dates and set the time on them based on low and high time limits. Then compare your source time with the limits.

$(document).ready(function () {
  var d = new Date();
  var low = new Date();
  var high = new Date();

  low.setHours(8);
  low.setMinutes(29);
  high.setHours(16);
  high.setMinutes(29);

  if (d.getTime() > low.getTime() && d.getTime() < high.getTime()) {
    $('.hours').show();
    $('.closed').hide();
  } else {
    $('.hours').hide();
    $('.closed').show();
  }
});

Date#getTime() returns the number of milliseconds, which is easier to compare.

Answer 4

I have prepared demo for you here, in which we will be doing like

var start = new Date();
var end = new Date();
var time = new Date().getTime();

if (time > start.setHours(8,29) && time < end.setHours(16,29))