JavaScript：如何将 UTC 日期/时间转换为山区时间？答案

【问题标题】：JavaScript: How to convert UTC date / time to Mountain Time?JavaScript：如何将 UTC 日期/时间转换为山区时间？
【发布时间】：2019-03-24 16:09:19
【问题描述】：

我一直在尝试编写一个脚本，它将获取丹佛的当前时间并将其输出到 URL 中。

我已经走到这一步了：http://jsfiddle.net/Chibears85/h41wu8vz/4/

$(function() {
  var today = new Date();
  var ss = today.getUTCSeconds();
  var nn = today.getUTCMinutes() - 3; //3 minute delay
  var hh = today.getUTCHours() - 6; //Offset UTC by 6 hours (Mountain Time)
  var dd = today.getUTCDate();
  var mm = today.getUTCMonth() + 1; //January is 0!
  var yyyy = today.getUTCFullYear();
  if (dd < 10) {
    dd = '0' + dd
  }
  if (mm < 10) {
    mm = '0' + mm
  }
  if (hh < 10) {
    hh = '0' + hh
  }

  var today = mm + '/' + dd + '/' + yyyy + '%20' + hh + ':' + nn + ':' + ss ;
  $('img.r').each(function() {
    var url = $(this).attr('src');
    if (url.indexOf("?") >= 0) {
      $(this).attr("src", url + today);
    } else {
      $(this).attr("src", url + "?feature_date=" + today);
    }
  });
});

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="screen.js"></script>
<img class="r" src="https://mywebsite.com&DateTime=" width="400">

它将日期插入 URL，但是从山区时间下午 6 点到凌晨 12 点，时间会中断（2018 年 10 月 20 日 01:00:00 变为 2018 年 10 月 20 日 -5:00:00 而不是 19:00:00 2018 年 10 月 19 日）和 3 分钟的延迟偏移使其每小时从 :00-:02 中断（1:01 变为 1:-02 而不是 00:59）。

我想知道如何修复 UTC 偏移量，这样它就不会减去负数并适当地偏移日期/月份/年份。

【问题讨论】：

你可以使用插件吗？如果是这样，你可以使用MomentJS，先看看文档，如果你认为你可以从一些插件中获得帮助，试着用它来计算，如果你遇到任何复杂的问题，也许我可以帮助解决这样一来，这样做会降低很多代码复杂性，并且 momentjs 将能够处理计算而不会出现与时区或其他任何错误有关的任何错误
我可以使用 MomentJS，我今天早些时候正在研究它试图解决这个问题，但我遇到了无法弄清楚如何让 MomentJS 将日期输出到我的图像的 URL 中。
那么，您需要获取丹佛的当前时间并将其设置为图像的 src 属性吗？
浏览器对toLocaleString 选项的支持程度不同，但根据您的要求，您也许可以使用new Date().toLocaleString('en-US', {timeZone: 'America/Denver'})
图片每 3 分钟上传到服务器，但标注为创建时间而不是发布时间（12:03 创建的图片直到 12:06 才会推送到服务器）

标签： javascript datetime timezone utc

【解决方案1】：

根据您的浏览器支持需求，您可以使用toLocaleString，但请注意locales and options may not be supported in Edge and are not supported in Android webview。

new Date().toLocaleString('en-US', {timeZone: 'America/Denver'})

要遵循您的函数得出结论并手动将 UTC 时间转换为山区时间（山区标准时间或山区夏令时，具体取决于一年中的时间），您必须扩展您的函数以处理夏令时。例如（这就是为什么像 Moment.js 这样的库如此受欢迎的原因，可能值得研究一下以满足您的需求）：

const twoDigit = (d) => (d < 10 ? '0' : '') + d;
const formatDate = (date, time) => {
  date = date.map((x) => twoDigit(x)).join('/');
  time = time.map((x) => twoDigit(x)).join(':');
  return `${date} ${time}`;
};

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

const getMountainTime = () => {
  const 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 minute = dt.getUTCMinutes(); // utc minutes
  let second = dt.getUTCSeconds(); // utc seconds
  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;
  }
  
  month += 1;
  return formatDate([month, date, year], [hour, minute, second]);
};

const denver = getMountainTime();
console.log(denver);

【讨论】：

我注意到您从不使用偏移量来更改最后的小时。它仍设置为 UTC 值。您的意思是使用 twoDigit(hour - offset) 吗？
@cwbusacker - 很好的观察。查看代码后，这只是原始草率答案的几个问题之一。请参阅编辑后的答案，了解我认为现在是正确处理各种边缘情况的更正版本。

【解决方案2】：

这可以用纯 JS 解决，虽然我一开始想用 MomentJS。一个好的解决方案是：

var today = new Date();
var todayThreeMinutesLess = new Date(today - (3  * 60000)); // to reduce 3 minutes from current time, as 60000 ms is 1 minute;
var today = todayThreeMinutesLess.toLocaleString('en-US', {timeZone: 'America/Denver', hour12: false}).replace(', ', '%20');
$('img.r').each(function() {
    var url = $(this).attr('src');
    if (url.indexOf("?") >= 0) {
      $(this).attr("src", url + today);
    } else {
      $(this).attr("src", url + "?feature_date=" + today);
      // just to prevew the url format
      $(this).attr("alt", url + "?feature_date=" + today);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="r" src="https://mywebsite.com&DateTime=" width="400">

【讨论】：

这太完美了！几乎正是我想要的。唯一的添加是 3 分钟的偏移来解释延迟（03:00 将是 02:57 等等）。
正是我需要的。非常感谢您的帮助！
顺便说一句，只是出于好奇，我可以知道你为什么需要减去 3 分钟吗？ :)

【解决方案3】：

您也可以为此使用 date-fnc 库。

import { formatToTimeZone } from 'date-fns-timezone';

const value = new Date();
const pattern = 'MMM. DD, YYYY [at] H:mma [MT]';

const outputDate =  formatToTimeZone(value, pattern, { timeZone: 'MST' })

这是格式选项的链接https://date-fns.org/v1.9.0/docs/format

这是日期-fnc 时区https://date-fns.org/v2.0.0-alpha.27/docs/Time-Zones

【讨论】：