Hours of operation display 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 &gt;= 12 ? "PM" : "AM";

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

  if ((dayOfWeek == 6) &amp;&amp; hour &gt;= 8 &amp;&amp; hour &lt;= 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) &amp;&amp; hour &gt;= 8 &amp;&amp; hour &lt;= 16) {
    hour = ((hour + 11) % 12 + 1);
    timeDiv.innerHTML = 'Hi!! ' + today + ' ' + hour + ':' + minutes + suffix + ' - we\'re open!';
    timeDiv.className = 'open';
  }

  else {
    if (hour == 0 || hour &gt; 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();
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="hours-block"&gt;
  &lt;h2&gt;Hours&lt;/h2&gt;
  &lt;div id="Monday" class="dateTime Monday Tuesday Wednesday Thursday Friday"&gt;
    &lt;div class="day"&gt;Monday - Friday&lt;/div&gt;
    &lt;div class="time"&gt;8:00am - 4:00pm&lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div id="Saturday" class="dateTime Saturday"&gt;
    &lt;div class="day"&gt;Saturday&lt;/div&gt;
    &lt;div class="time"&gt;8:00am - 2:00pm&lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div id="Sunday" class="dateTime Sunday"&gt;
    &lt;div class="day"&gt;Sunday&lt;/div&gt;
    &lt;div class="time"&gt;Closed&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
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 &amp;&amp; day !== 6;
  // This can also be weitten as
  // return day &gt; 0 &amp;&amp; day &lt; 6;
}

function isWorkingHours(hour) {
  hour = hour || new Date().getHours();
  return hour &gt;= 8 &amp;&amp; (isWorkingDay() &amp;&amp; hour &lt;= 16 || !isWorkingDay() &amp;&amp; hour &lt;= 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() &amp;&amp; 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;
}
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="hours-block"&gt;
  &lt;h2&gt;Hours&lt;/h2&gt;
  &lt;div id="Monday" class="dateTime Monday Tuesday Wednesday Thursday Friday"&gt;
    &lt;div class="day"&gt;Monday - Friday&lt;/div&gt;
    &lt;div class="time"&gt;8:00am - 4:00pm&lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div id="Saturday" class="dateTime Saturday"&gt;
    &lt;div class="day"&gt;Saturday&lt;/div&gt;
    &lt;div class="time"&gt;8:00am - 2:00pm&lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div id="Sunday" class="dateTime Sunday"&gt;
    &lt;div class="day"&gt;Sunday&lt;/div&gt;
    &lt;div class="time"&gt;Closed&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div id='timeDiv'&gt;&lt;/div&gt;






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')