Document Write On Certain Hours & Days

Question

I've been trying to get this script to show a paragraph during certain hours of the day. Now I'm trying to add certain days, such as the weekend. I was unable to figure it out.

This is one of the dozen things I tried:

var day = new Date();
var week = day.getHours();
var weekend = day.getDay() == 0 || day.getDay() == 6;
if (week < 4 || week > 12) || (weekend === true) { document.write('<p class="alert alert-danger department-hours-warning"><i class="fa fa-clock-o fa-3x pull-left"></i>NOTICE: This is not a 24 hour department and we are currently closed, please anticipate a delay in response. Our department hours are from 09:00-17:00 EST Monday through Friday. We are closed on USA holidays and other days that may be listed on our calendar.</p>'); }

The goal here is too show the paragraph if it's not between 4am to 12am on weekdays.

EDIT: updated script, but it is not working.

Possible duplicate of [how to determine if date is weekend in javascript](http://stackoverflow.com/questions/3551795/how-to-determine-if-date-is-weekend-in-javascript) — jessegavin, Mar 07 '17 at 02:37
@Satpal I fixed the variable with what you suggested, but the script doesn't appear to work. — Xarcell, Mar 07 '17 at 02:43
Also you if condition is incorrect it should be `if( (week < 4 || week > 12) && weekend === false){...}` additionally use proper naming convention — Satpal, Mar 07 '17 at 02:45
Or `weekend = !(day.getDay() % 6)` assuming "western" weekends of Saturday and Sunday. Other cultures use other days. — RobG, Mar 07 '17 at 02:45
And `week` is a horrible variable name for something that stores hours. — reduckted, Mar 07 '17 at 02:45
@reduckted thanks for pointing that out. I intended to change a few variable names if I can get the script working. It just became a mess because of all the different methods I was trying, when I was trying to figure it out. — Xarcell, Mar 07 '17 at 02:48
@Satpal thanks, but I don't think it should be set to false should it? It should show on the weekends, regardless of hours. `if( (week < 4 || week > 12) || weekend === false)` ? — Xarcell, Mar 07 '17 at 02:54

haxxxton · Accepted Answer · 2017-03-07T02:59:44.217

As mentioned in your previous question (which you've since deleted). JS dates are notoriously tricky. For example in your code new Date() is created relative to the users local timezone, not that of your business. This means it may well be a weekday for you while it is a weekend for me.

My recommendation would be to use a library like MomentJS to assist with your querying. It would look something like:

(function(){
  function initialize(){
    moment.tz.setDefault('America/New_York'); // replace this with your actual timezone
    var NOW = moment();
    var alertZone = document.getElementById('alertZone');
    // is weekend or out of office hours
    if(NOW.isoWeekday() > 5 || NOW.hour() < 9 || NOW.hour() > 17){
      alertZone.innerHTML = '<p class="alert alert-danger department-hours-warning clearfix"><i class="fa fa-clock-o fa-3x pull-left"></i>NOTICE: This is not a 24 hour department and we are currently closed, please anticipate a delay in response. Our department hours are from 09:00-17:00 EST Monday through Friday. We are closed on USA holidays and other days that may be listed on our calendar.</p>';
    }else{
      alertZone.innerHTML = '<p class="alert alert-success department-hours-success clearfix"><i class="fa fa-clock-o fa-3x pull-left"></i>Welcome y\'all we\'re open!</p>';
    }
  }
  window.onload = initialize;
})()

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.11/moment-timezone.min.js"></script>
<div id="alertZone"></div>

Explanation

Moment timezone let's us set your local timezone using .setDefault()(all moments created after this will be relative to YOUR timezone rather than that of the user).

We then check using .isoWeekday()(which is a non-locale specific check for day of the week [1-5 = Monday-Friday]), and .hour()(returns a number between 0-23) if we are outside of office hours.

thanks, I really appreciate you working it out for me. I've been at it for over 3 hours. — Xarcell, Mar 07 '17 at 03:12
"*JS dates are notoriously tricky*" not really. There's no built–in support for timezones, so it's not so much "tricky" as not available. The rest of the functionality is pretty simple (two lines of code). I don't understand the inclusion of two links that are unrelated to the question (they might make sense if there was a runnable snippet). — RobG, Mar 07 '17 at 04:04
@RobG, im not sure what you mean about unrelated links, as there is a [runnable snippet](http://imgur.com/a/1bGnz). If you're referring to the inclusion of FontAwesome and Bootstrap, this is for the styling, as inferred from the class names in OP's question. JS Dates are not like DateTime's in other languages, and can present a number of "gotcha"s if used in a similar way. Similarly, parsing of dates cross-browser presents another swathe of issues. To avoid explaining the specific nuances of JS Dates, "tricky" was used as a catch all. Open to an alternate descriptive word for future usage — haxxxton, Mar 07 '17 at 04:22

Document Write On Certain Hours & Days

1 Answers1