Hours of operation display

Question

I'm working on an hours of operation display, which list the hours out:

• Monday - Friday / 8 - 4
• Saturday / 8 - 2
• Sunday / Closed

I have my script add a class to highlight the lines depending on which day of the week it is, but I wonder another way to complete the task. I would like it if I was able to define monday-friday as one instead of the entire list of them in classes.

var now = new Date();
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

var checkTime = function() {
  var today = weekday[now.getDay()];
  var timeDiv = document.getElementById('timeDiv');
  var dayOfWeek = now.getDay();
  var hour = now.getHours();
  var minutes = now.getMinutes();

  //add AM or PM
  var suffix = hour >= 12 ? "PM" : "AM";

  // add 0 to one digit minutes
  if (minutes < 10) {
    minutes = "0" + minutes
  };

  if ((dayOfWeek == 6) && hour >= 8 && hour <= 14) {
    hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
    timeDiv.innerHTML = '' + today + ' ' + hour + ':' + minutes + suffix + ' - we\'re open!';
    timeDiv.className = 'open';
  } 

  else if ((dayOfWeek == 1 || dayOfWeek == 2 || dayOfWeek == 3 || dayOfWeek == 4  || dayOfWeek == 5) && hour >= 8 && hour <= 16) {
    hour = ((hour + 11) % 12 + 1);
    timeDiv.innerHTML = 'Hi!! ' + today + ' ' + hour + ':' + minutes + suffix + ' - we\'re open!';
    timeDiv.className = 'open';
  }

  else {
    if (hour == 0 || hour > 12) {
      hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
    }
    timeDiv.innerHTML = ' Sorry—we\'re closed!';
    timeDiv.className = 'closed';
  }
};

    var currentDay = weekday[now.getDay()];
    var currentDayCLASS = "." + currentDay; //gets todays weekday and turns it into     class
    $(currentDayCLASS).toggleClass("today"); //hightlights today in the view hours

    setInterval(checkTime, 1000);
    checkTime();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="hours-block">
  <h2>Hours</h2>
  <div id="Monday" class="dateTime Monday Tuesday Wednesday Thursday Friday">
    <div class="day">Monday - Friday</div>
    <div class="time">8:00am - 4:00pm</div>
  </div>
  <br>
  <div id="Saturday" class="dateTime Saturday">
    <div class="day">Saturday</div>
    <div class="time">8:00am - 2:00pm</div>
  </div>
  <br>
  <div id="Sunday" class="dateTime Sunday">
    <div class="day">Sunday</div>
    <div class="time">Closed</div>
  </div>
</div>

Answer 1

You can try something like this:

• Create a list of utility function that you might want to use. You can export them to a utility file. This will keep code clean and maintainable.
  • isWorkingDay: Monday - Friday
  • isWorkingHours: Start at 8am and for working day end at 4pm. On Saturday, end at 2pm.
  • getDoubleDigitNumber: This will be helpful for both hours and minutes.
  • getHoursIn12HrFormat: To get hours in 12 hour format.
  • getDayText: To get name of day.
• Now, in you main file, you can write a formatter function that would give you date time in specific format.
• In your checkTime function, you do not want to write much logic. Use your utility functions and add any specific logic to mutate DOM.
• Since you are dealing with classes, you should avoid className. This will replace all existing classes. Instead, use .classList. It provides many useful utilities.

Following is a sample:

function getDoubleDigit(value) {
  return ("00" + value).slice(-2);
}

function getHourIn12HrFormat(hour) {
  hour = hour || new Date().getHours();
  // This can be written as:
  // return hour % 12 || 12;
  return ((hour + 11) % 12 + 1);
}

function isWorkingDay(day) {
  return day !== 0 && day !== 6;
  // This can also be weitten as
  // return day > 0 && day < 6;
}

function isWorkingHours(hour) {
  hour = hour || new Date().getHours();
  return hour >= 8 && (isWorkingDay() && hour <= 16 || !isWorkingDay() && hour <= 14);
}

function getDayText(day) {
  var weekday = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  day = day || new Date().getDay();
  return weekday[day]
}

function getDateTimeString(date) {
  var now = date || new Date();
  var today = getDayText();
  var minutes = now.getMinutes();
  var hour = now.getHours();
  //add AM or PM
  var suffix = ["PM", "AM"][hour % 12];
  return today + ' ' + getHourIn12HrFormat() + ':' + minutes + suffix

  // If you are ok to use moment.js, all the above code can be converted to:
  // return moment().format('dddd hh:mm A')
}

var checkTime = function() {
  var now = new Date();
  var timeDiv = document.getElementById('timeDiv');
  var dayOfWeek = now.getDay();

  // reset classes and only add necessary class.
  timeDiv.classList.remove('open,close');
  if (isWorkingHours() && dayOfWeek !== 0) {
    timeDiv.innerHTML = ((isWorkingDay() ? 'Hi!! ' : '') + getDateTimeString() + ' - we\'re open!');
    timeDiv.classList.add('open');
  } else {
    timeDiv.innerHTML = ' Sorry—we\'re closed!';
    timeDiv.classList.add('closed');
  }
};

var currentDay = getDayText();
var currentDayCLASS = "." + currentDay; //gets todays weekday and turns it into     class
$(currentDayCLASS).toggleClass("today"); //hightlights today in the view hours

setInterval(checkTime, 1000);
checkTime();

#timeDiv {
  padding: 4px;
  border: 1px solid cyan;
  background: #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="hours-block">
  <h2>Hours</h2>
  <div id="Monday" class="dateTime Monday Tuesday Wednesday Thursday Friday">
    <div class="day">Monday - Friday</div>
    <div class="time">8:00am - 4:00pm</div>
  </div>
  <br>
  <div id="Saturday" class="dateTime Saturday">
    <div class="day">Saturday</div>
    <div class="time">8:00am - 2:00pm</div>
  </div>
  <br>
  <div id="Sunday" class="dateTime Sunday">
    <div class="day">Sunday</div>
    <div class="time">Closed</div>
  </div>
</div>
<div id='timeDiv'></div>

---

As suggested by @Nitin Dhomse, you can use moment.js.

This is how your formatting code would look like with moment:

return moment().format('dddd hh:mm A')