Display div based on remote timezone and dates

问题

I'm trying to display a chat div that displays between the hours of 8am-6pm Monday to Friday "Online" or show nothing if offline, based on the Eastern Time Zone (NYC), so that customers from Beijing will see Online or Offline based on these hours.

Simply need to show() or hide() the div. So far I have the hours, but I'm not sure how to get them to be in relation to the user time-zone.

$(document).ready(function () {

var start = new Date();
var end = new Date();
var time = new Date().getTime();

if (time > start.setHours(8,00) && time < end.setHours(18,00)) {
    $('.online').show();
}
else {
    $('.offline').hide();
    }
});

回答1:

The previous answer (seen in edit history) was to use the offset from UTC, however that isn't going to be an option if you want to support Daylight Savings; which is an important thing to do.

As such, the modification to the previous suggestion completely removes the use of UTC. To support daylight savings, the only proper way to get the time from EST is going to be to set the locale to that location, read the time, set up a new date object (which will technically be set up in the client local, but all we really want from it are the day and hour response from the Date object so we will ignore that technicality).

This is done by passing an object with the toLocaleString call which specifies the timezone, and then constructing a new date with the result of that.

var NYDate = new Date(new Date().toLocaleString("en-US", {timeZone: "America/New_York"}));

var NYHour = NYDate.getHours();
var NYDay = NYDate.getDay()

if (NYHour >= 8 && NYHour <= 18 &&
    NYDay > 0 && NYDay < 6) {
    $('.online').show();
}else {
    $('.online').hide();
}

.online { 
  display: none;
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="online">Online</div>

回答2:

No JavaScript needed. You should do this from the server side. (The customer doesn’t tell the store when it’s open, the store tells the customer!)

Assuming your HTML is being generated by some server-side language (PHP, Ruby, etc), set the program to use New York time, and simply calculate if you’re within the “open” times. If you’re open, generate the Chat div. if you’re closed... don’t.

(Or alternately, show/hide it via CSS and classes)

回答3:

Turns out that this is not a completely trivial task using JavaScript (as noted in the answer from @StephenR, this may be easier to deal with server side). And as noted in some of the comments, using a library may be the better js approach.

That said, after thinking a bit about the comments from @RobG regarding varying browser support for options like timeZone in toLocaleString, I was curious what it would take to solve this another way (makes me grateful for the various js date libraries). Snippet below...

const getOffset = (month, date, day, hour) => {
  // assume EST offset
  let offset = 5;
  // adjust to EST offset as needed
  if ((month > 2 && month < 10) || (month === 2 && date > 14)) {
    offset = 4;
  } else if (month === 2 && date > 7 && date < 15) {
    if ((day && date - day > 7) || (day === 0 && hour - offset >= 2)) {
      offset = 4;
    }
  } else if (month === 10 && date < 8) {
    if ((day && date - day < 0) || (day === 0 && hour - offset < 1)) {
      offset = 4;
    }
  }
  return offset;
}

const isOnline = () => {
  let dt = new Date(); // current datetime
  let year = dt.getUTCFullYear(); // utc year
  let month = dt.getUTCMonth(); // utc month (jan is 0)
  let date = dt.getUTCDate(); // utc date
  let hour = dt.getUTCHours(); // utc hours (midnight is 0)
  let day = dt.getUTCDay(); // utc weekday (sunday is 0)
  let offset = getOffset(month, date, day, hour);
  if (hour - offset < 0) {
    hour = 24 + hour - offset;
    day = day ? day - 1 : 6;
    if (date === 1) {
      if (!month) {
        year -= 1;
        month = 11;
      } else {
        month -= 1;
      }
      date = new Date(year, month + 1, 0).getDate();
    } else {
      date -= 1;
    } 
  } else {
    hour -= offset;
  }
  
  if (day > 0 && day < 6 && hour > 7 && hour < 19) {
    return true;
  }
  return false;
}


if (isOnline()) {
  console.log('online'); // handle online
} else {
  console.log('offline'); // handle offline
}

来源：https://stackoverflow.com/questions/52303123/display-div-based-on-remote-timezone-and-dates