Question

使用p-calendar日期时间选择器，如何在客户端的时区显示UTC存储日期？

我使用onSelect记录了该值，并显示了这一点：

Mon Dec 04 2017 14:17:00 GMT-0500 (Eastern Standard Time)

然后当我将值发送到数据库时，它会转换为UTC，这完全没问题，但是，我说刷新页面并在p-calendar元素中显示值，它显示{{1} （UTC）。

我倾注了the docs并且没有发现任何时区。在选择时考虑时区似乎很奇怪，但是从存储装载时不会考虑时区。

在我的package.json中，我选择了Mon Dec 04 2017 19:17:00。

我正在创建的应用程序将在全球范围内使用，因此时间应始终显示在客户端的时区中。

Answer 1

想出来......也意识到我遗漏了一大堆涉及的细节。

使用Typescript，相关字段的类型为Date。当fetch映射到此字段时，它实例化了一个新的Date对象，默认情况下应用了我的浏览器的时区。很好的实现。因此，当值为Mon Dec 04 2017 14:17:00 (UTC)时，由此创建的Date对象为Mon Dec 04 2017 14:17:00 GMT-0500：没有时移，只是按原样取值并应用我的时区。

所以为了解决我的问题，我不得不将日期值转移到一个新的Date实例，在那里我明确地将时区设置为UTC。 p-calendar负责其余部分，并将其转换为我当前的时区进行展示。

Answer 2

您可以指定[utc]=true，如下所示

   <p-calendar ... [utc]='true'></p-calendar>

编辑

注意，[utc]自那时起已被弃用，请参阅http://github.com/primefaces/primeng/issues/5853。仅用于旧的PrimeNg版本。

Answer 3

问题是：
您在日历中选择的日期是2017-12-04 14:07:00 GMT-0500。
保存到数据库时，会调用JSON.stringify()方法。对于日期时间属性（例如 billDate），它将调用 this.billDate.toISOString().
'toISOString()' 方法会将日期时间更改为 '2017-12-07T19:07:00Z'，因此数据库值增加了 5 小时！！！

解决方法：在main.js中覆盖Date.toISOString()，执行下面的代码就可以了。

  Date.prototype.toIsoString = function() {
    var tzo = -this.getTimezoneOffset(),
    dif = tzo >= 0 ? '+' : '-',
    pad = function(num) {
        var norm = Math.floor(Math.abs(num));
        return (norm < 10 ? '0' : '') + norm;
    };
    return this.getFullYear() +
     '-' + pad(this.getMonth() + 1) +
     '-' + pad(this.getDate()) +
     'T' + pad(this.getHours()) +
     ':' + pad(this.getMinutes()) +
     ':' + pad(this.getSeconds()) +
     dif + pad(tzo / 60) +
     ':' + pad(tzo % 60);
  }

  var dt = new Date();
  console.log(dt.toIsoString());

primeng日历 - 在客户端时区显示

3 个答案: