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>

• Nitin Dhomse: Use moment js instead of doing these operations manually, you will get everything there by API methods

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