javascript - 在 JavaScript/moment 中解释(不转换!)其他时区的日期

Question

这个问题似乎类似于Deprecation warning: moment construction falls back to js Date ，因为出现相同的警告。但是，该警告不是这个问题的重点，并且所描述的解决方案不太适合我的用例。我已经编辑了下面的适当段落来解释为什么会这样。

考虑一个网络应用程序，用户可以在其中选择固定相机拍摄的图像的时间范围。显然，这台相机可能不在他自己的时区。此外，提供图像的 REST-API 在 UTC 中执行所有操作。

我正在使用 angular4、moment.js 和 moment timezone。

因此，他可以选择是要查看带有本地时区时间戳、相机所在时区时间戳还是 UTC 时间戳的图像。到目前为止一切顺利，到目前为止一切正常。

我遇到麻烦的地方是设置时间范围。显然，用户设置的开始和结束时间应该被解释为他选择显示的时区，所以我可以在将请求发送到服务器之前将它们转换为 UTC。我从日期选择器(在本例中为 primeng 日历，但这并不重要)获得的 Date 对象当然是浏览器本地时间。

所以我需要做的是获取该日期并按原样在相机的时区中解释它，而不转换它。因此，如果用户在时区 UTC -2 中设置“从 10:00 到 17:00”，并且相机位于 UTC + 2，我需要获得“UTC +2 中的 10:00 到 17:00” ，而不是“UTC +2 中的 14:00 到 21:00”。

我尝试了几种方法，其中一些甚至可行，但每种方法似乎都有自己的注意事项，而且它们都很丑陋，因为它们进行了不必要的字符串转换。例如:

moment.tz(date.toLocaleString, cameraTimezone)

这有效，但会抛出弃用警告:

value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions.

我可以通过指定传递的日期字符串的格式来消除该警告，但我面临的问题是 toLocaleString() 和 toString() 都不一致。 toLocaleString() 显然会根据语言环境提供另一种格式，并且 toString() 在不同的浏览器中会产生不同的结果，所以我怎么知道我得到了什么？

所以我尝试使用适当的格式，但是如果我直接使用 Date::toIsoString，我得到的那一刻已经转换为 UTC，这也不是我需要的:

let datestring = date.toISOString();   //datestring will be in utc
const mom = moment.tz(datestring, cameraTimezone);  //moment will therefore be the wrong time.

有一种明显的方法是自己创建 Date 对象的字符串(这在 javascript 中非常丑陋)，然后通过指定该格式将其解析为时刻。但是所有这些字符串转换感觉更像是一个 hack，而不是一个合适的解决方案，我真的很想完全摆脱它们，只是告诉时刻“你有一个约会，它应该在这个时区，即使它说不是”。有办法吗？

Answer 1

它可能适合根据本地日期和用户选择的时间和时区构建符合 ISO 8601 的字符串，例如

window.onload = function() {
  var form = document.getElementById('cameraTimeDetail');
  form.addEventListener('submit', getPicISO, false);
  
}

function getPicISO(e) {

  // For demo
  e.preventDefault();

  function z(n){return ('0'+n).slice(-2)}
  var date = new Date();
  var form = this;
  
  // Use local date parts
  var s = date.getFullYear() + '-' +
          z(date.getMonth()+1) + '-' +
          z(date.getDate()) + 'T' +
          // Use input timezone and time
          form.pictureTime.value + 
          form.cameraTimezone.value;

  // Consructed ISO string
  form.timeString.value = (s);
  
  // Convert to UTC ISO String
  form.timeStringUTC.value = new Date(s).toISOString();

  return false;
}

input, button {
  width: 15em;
}

<form id="cameraTimeDetail">
  <table>
    <tr>
      <td>Enter timezone (e.g. -08:00, +05:30)
      <td><input name="cameraTimezone" value="+05:30">
    <tr>
      <td>Enter time (HH:mm)
      <td><input name="pictureTime" value="14:37">
    <tr>
      <td><input type="reset">
      <td><button>Get pic</button>
    <tr>
      <td>Selected date and time:
      <td><input name="timeString" readonly>
    <tr>
      <td>Equivalent UTC:
      <td><input name="timeStringUTC" readonly>
  </table>
</form>

显然，这是简化的，需要验证输入值，但显示了逻辑。您可能还想让用户选择日期，这可以使用相同的逻辑。