Changing display text based on scheduled GMT

Question

Normally I have done a bit of work to get to where I need to ask for help, but I'm totally stumped on this one.

Using plain ol JavaScript, I need to change the text of an element based on whether or not it falls during any of the following hour/day combinations:

M-F 5:00 AM-9:00 PM Pacific Time
Sa-Su 5:00 AM-5:30 PM Pacific Time

I know how to do this if the people viewing the site are in the same time zone, but I am lost on what to do to ensure everyone see's the right thing regardless of their local timezone.

Can you show what you have tried so far? – NewToJS Jul 21 '18 at 01:10 — NewToJS, Jul 21 '18 at 01:10

score 1 · Accepted Answer · edited Feb 06 '21 at 13:55

Pacific Standard Time is UTC-0800, however everywhere that uses PST also observes daylight saving so just converting to PST may not be sufficient.

Anyway, as pretzelhammer suggests you can convert the PST times to UTC to create suitable Date objects, then compare with those. Note that 21:00 PST is 05:00 UTC the next day, but that's not really a problem. You can set the start time as 13:00 UTC then just add 16 hours Monday to Friday, or 12.5 hours on Saturday and Sunday.

To get the right start date, if it's before 08:00 UTC, change the UTC date to the previous day and the time to 05:00. Then depending on whether it's a week day or week end, the finish is set by adding the open duration.

// M-F   05:00 - 21:00 PST -> 13:00 - 05:00 UTC
// Sa-Su 05:00 - 17:30 PST -> 13:00 - 01:30 UTC

function getRange(date) {
  // Start is 1300 UTC every day
  var start = new Date(date);
  // If before 0800 UTC, set to previous day
  if (start.getUTCHours() < 8) {
    start.setDate(start.getDate() - 1);
  }
  start.setUTCHours(13,0,0,0);
  // Set end to +16 or +12.5 hours if weekend
  var end = new Date(start);

  if (end.getDay() % 6) {
    end.setHours(end.getHours() + 16);
  } else {
    end.setHours(end.getHours() + 12, 30);
  }
  
  return [start, end];
}

function isInRange(date) {
  date = date || new Date();
  var range = getRange(date);
  return date >= range[0] && date <= range[1];
}

// Helper to get current time PST (UTC-0800)
function getPSTTime(date) {
  date = date || new Date();
  function z(n){return (n<10?'0':'')+n}
  var d = new Date(date);
  d.setUTCHours(d.getUTCHours()-8);
  
  return 'Sun Mon Tue Wed Thu Fri Sat'.split(' ' )[d.getUTCDay()] + ' ' + z(d.getUTCHours()) + ':' + z(d.getUTCMinutes());
}

// Is the current time in range?
var d = new Date();
console.log('PST Time: ' + getPSTTime());
console.log('Is it in range? ' + (isInRange(d)? 'yes':'no'));

score 0 · Answer 2 · answered Jul 21 '18 at 01:36

Easiest way would be to convert your hours into UTC time and then use JS Date's UTC functions. UTC is 7 hours ahead of Pacific Time (right now) so your UTC hours would be:

M-F 12:00 PM - 4:00 AM UTC
Sa-Su 12:00 PM - 12:30 AM UTC

Then knowing that you can do:

function isItWorkingHours(date = null) {
  date = date ? date : new Date();
  const utcDay = date.getUTCDay();
  const utcHour = date.getUTCHours();
  const utcMinute = date.getUTCMinutes();
  
  if (utcHour >= 12) { // any day after noon
    return true;
  } else if (
    utcHour === 0 && // between 12 AM & 1 AM
    utcMinute <= 30 && // before 12:30 AM
    utcDay <= 1 // on sunday or monday
    ) {
    return true;
  } else if (
    utcHour <= 4 && // before 4AM
    utcDay >= 2 && // on or after Tuesday
    utcDay <= 7 // on or before Saturday
    ) {
    return true;  
  } else {
    return false;
  }
}

console.log(isItWorkingHours());

Granted, that is a bit confusing, and you will have to update it a little since Pacific Time goes in and out of Daylight Savings while UTC ignores it. If you're willing to pull in a 3rd party dependency you should definitely look into using Moment.js

It's much simpler: just set the time and [*Compare two dates with JavaScript*](https://stackoverflow.com/questions/492994/compare-two-dates-with-javascript). ;-) — RobG, Jul 21 '18 at 09:01

Changing display text based on scheduled GMT

2 Answers2