JS Open Hours

[Gomo]

Hey there!

 

I've got my "opening hours" managed via JS and atm it looks like this:
 

var checkTime = function () {
	"use strict";
    var now = new Date();
    var messageDiv = document.getElementById('messageDiv');
    var dayOfWeek = now.getDay();
    var hour = now.getHours(); 
	
    if ((dayOfWeek > 0 && dayOfWeek < 3 && hour >= 9 && hour < 18) || (dayOfWeek > 3 && dayOfWeek < 6 && hour >= 9 && hour < 18) || (dayOfWeek === 6 && hour >= 10 && hour < 14) || (dayOfWeek === 3 && hour >= 9 && hour < 14)) {
        messageDiv.innerHTML = 'We are open!';
        messageDiv.className='open'; 
				
    }
    else {
        messageDiv.innerHTML = 'We are closed!';
        messageDiv.className='closed';
    }
};

setInterval(checkTime, 1000);
checkTime();

Is there maybe a more "elegant" solution to this? .. I wanted to add launch break for every working from 12:00h to 13:00h and realized how messy it would get. I'm not that experienced with JS, so yeah, your help would mean a lot to me!

 

Thanks in advance!

Edited January 29, 2017 by Gomo

[Barand]

I'd separate the time check from the day check

if it is a work day
    if it is work hour
        we are open
    else
        we are closed
    endif
else
    we are closed
endif

[.josh]

So a couple of things. 

 

Firstly, sure, there are more "elegant" ways of writing this if "make the shortest amount of code possible" is what you consider "elegant". However, I would argue what is more readable and flexible for yourself and other non/semi-coders in the future would be to have a lookup table of hours, Something along the lines of this (I think I got the hours of operation right, based on your condition):

function checkTime() {
    // array of 7 elements, one for each day of the week
    var hoursOfOperation = [
        // array of 24 elements, one for each hour of the day. 
        // 0 value means closed, 1 value means open
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], // sunday    - closed all day!
        [0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0], // monday    - open 9a to 5p
        [0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0], // tuesday   - open 9a to 5p
        [0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0], // wednesday - open 9a to 1p
        [0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0], // thursday  - open 9a to 5p
        [0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0], // friday    - open 9a to 5p
        [0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0]  // saturday  - open 10a to 1p
    ];
    var now = new Date();
    var messageDiv = document.getElementById('messageDiv');
    var dayOfWeek = now.getDay();
    var hour = now.getHours();    
    var status = hoursOfOperation[dayOfWeek][hour] ? 'open' : 'closed';
    messageDiv.innerHTML='We are '+status+'!';
    messageDiv.className=status;
  
} // end checkTime

See, now you can easily update a table for any hour of any day without messing with conditions. 

 

Secondly, I should point out to you that since javascript is client-side, the date/time is generated by the user's system clock locally set on their computer. Meaning, what their browser says the date/time is may not accurately reflect your actual hours of operation.  Consider someone in Colorado visiting your page, vs. someone in China.. completely different timezone. So, if you want to (more) accurately reflect your actual hours of operation, you will need to include some conversion to your timezone.  But even then, this is no guarantee it will be 100%, because visitors can (and often do, particularly kiddies trying to get around time/date based software restrictions ) change their time settings easy enough. Or alter your javascript.  So if you really truly want the most accuracy out of all this, you should move this stuff server-side.  But there is a snag to that, which is the constant check for current open/close status.

 

Which brings me to my last point: I don't know what your actual site looks like, but is it really necessary to use setInterval to constantly check and update this? Things like setInterval come with a performance penalty, and I have a sneaking suspicion just showing an updated status on every page load will likely be just fine.. 

 

 

 

[Strider64]

I also add that php's DateTime Class (server side) is more robust in my opinion in handling date and time. I simple little Ajax script to pull that into JavaScript and display (maybe a little fine tuning with JS).