Отображение div на основе удаленного часового пояса и дат

Question

Я пытаюсь отобразить div чата, который отображается с 8:00 до 18:00 с понедельника по пятницу в режиме онлайн или ничего не отображается в автономном режиме на основе Восточного часового пояса (NYC), чтобы клиенты из Пекина могли видеть Онлайн или в автономном режиме на основе этих часов.

Просто нужно показать () или скрыть () div. Пока у меня есть часы, но я не уверен, как их соотнести с часовым поясом пользователя.

$(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();
    }
});

Answer 1

JavaScript не требуется. Вы должны сделать это со стороны сервера. (Покупатель не сообщает магазину, когда он открыт, магазин сообщает покупателю!)

Предполагая, что ваш HTML генерируется неким серверным языком (PHP, Ruby и т. Д.), Настройте программу на использование нью-йоркского времени и просто рассчитайте, находитесь ли вы в «открытом» времени. Если вы открыты, создайте Div чата. если вы закрыты ... не надо.

(или, альтернативно, показать / скрыть его с помощью CSS и классов)

Answer 2

Оказывается, что это не совсем тривиальная задача с использованием JavaScript (как отмечено в ответе от @ StephenR , это может быть проще для решения на стороне сервера).И, как отмечено в некоторых комментариях, использование библиотеки может быть лучшим подходом для js.

Тем не менее, подумав немного о комментариях @ RobG относительно различной поддержки браузером таких опций, как timeZone в toLocaleString, мне было любопытно, что нужно сделать, чтобы решить эту проблемудругой способ (делает меня благодарным за различные библиотеки дат JS).Фрагмент ниже ...

let d = new Date(); // current datetime
let month = d.getUTCMonth(); // utc month (jan is 0)
let date = d.getUTCDate(); // utc date
let hour = d.getUTCHours(); // utc hours (midnight is 0)
let day = d.getUTCDay(); // utc weekday (sunday is 0)
let offset = 4; // assume EDT to start
let adjust = 1; // offset adjustment at DST
let mar = (month === 2); // march boolean
let nov = (month === 10); // november boolean

// handle march and november (DST change months)
if (mar || nov) {
  if (mar) {
    offset = 5; // assume EST to start
    adjust = -1; // DST adjustment to EDT
  }
  // handle offset shift to prior day
  if (hour - offset < 0) {
    date -= 1;
    day -= 1;
  }
  // handle date ranges when DST change may or may not have occurred yet 
  if ((mar && date > 7 && date < 15) || (nov && date < 8)) {
    // DST adjustment on or after DST sunday at 2:00am
    if (date >= date - day && hour - offset >= 2) {
      offset += adjust;
    }
  // DST adjustment for dates after DST change has already occured  
  } else if ((mar && date > 14) || (nov && date > 7)) {
    offset += adjust;
    // handle EDT to EST offset shift to prior day (not already handled above)
    if (nov && hour === 4) {
      date -= 1;
      day -= 1;
    }
  }
// handle months without DST changes
} else {
  // EDT to EST adjustment for EST months
  if (month < 2 || month > 10) {
    offset += adjust;
  }
  // handle offset shift to prior day
  if (hour < offset) {
    day -= 1;
  }
}

// get current timezone hour
if (hour >= offset) {
  hour -= offset;
} else {
  hour = hour - offset + 24;
}

// do something on weekdays between 8am and 6pm
if (day > 0 && day < 6 && hour > 7 && hour < 19) {
  console.log('online'); // handle online
// do something else on nights and weekends
} else {
  console.log('offline'); // handle offline
}

Answer 3

Предыдущий ответ ( в истории редактирования ) состоял в том, чтобы использовать смещение от UTC, однако это не вариант, если вы хотите поддерживать переход на летнее время; что важно сделать.

Таким образом, изменение предыдущего предложения полностью исключает использование UTC. Для поддержки перехода на летнее время единственный правильный способ получить время от EST - это установить языковой стандарт в этом месте, прочитать время, настроить новый объект даты (который технически будет установлен на локальном клиенте, но все, чего мы действительно хотим от этого, - это дневной и часовой ответ от объекта Date, поэтому мы будем игнорировать эту техническую природу).

Это делается путем передачи объекта с помощью вызова toLocaleString, который указывает часовой пояс, а затем построения новой даты с результатом этого.

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>