Angularjs在不同的时区显示时间戳日期

时间:2015-05-07 11:44:33

标签: angularjs angularjs-filter

我只需使用date:'medium'即可正确显示所选时间戳到该时间戳的本地时间。

我想要达到的目的是在某个时区显示此时间戳,例如UTC + 03:00或GMT + 03:00,仅举例说明。

  

我尝试过使用

     
      
  • 日期:'中':'UTC + 03:00'
  •   
  • 日期:'中':'UTC + 0300'
  •   
  • 日期: '中': 'GMT + 03:00'
  •   
  • 日期: '中': 'GMT + 0300'
  •   
  • 日期: '中': '+ 03:00'
  •   
  • 日期: '中': '+ 0300'
  •   

这些似乎都没有将时间戳时间更改为该时区的时间。

原因:显示用户首选时区设置的时间,即使它们当前位于具有其他时区的国家/地区。

有谁知道如何正确显示指定时区的时间戳?

2 个答案:

答案 0 :(得分:1)

了解Javascript的重要一点是,所有对时区的引用都是指正在执行代码的系统上的时区,您无法控制。您甚至不能信任客户端计算机以设置正确的时区。因此,当您选择显示时区的选项时,所有可以做的就是为您提供客户的时区。

JavaScript中的时区可能会变得复杂,这里有一个blog post,它会详细介绍并提供解决方案。

处理时区的一种简单方法是以UTC格式存储我的所有日​​期,然后在显示它们时使用moment.JS库格式化它们。假设您的所有时间都以UTC格式存储,您可以使用我在this plunker中编写的过滤器来格式化您的日期并将其操作到用户的首选时区。以下是示例过滤器代码:

// filter to set the timezone, assumes incoming time is in UTC
angular
  .module('plunker')
  .filter('toUserTimezone', function() {
    return function(input, format, offset) {

      var output, timezoneText, inputCopy;

      // we need to copy the object so we don't cause any side-effects
      inputCopy = angular.copy(input);

      // check to make sure a moment object was passed
      if (!moment.isMoment(inputCopy)) {
        // do nothing
        return input;

      } else {
        // set default offset change to 0
        offset = offset || 0;

        // change the time by the offet  
        inputCopy.add(offset, 'hours');

        // this will need to be improved so the added text is in the format +hh:mm
        offset >= 0 ? timezoneText = '+' + offset : timezoneText = offset;

        // format the output to the requested format and add the timezone 
        output = inputCopy.format(format) + ' ' + timezoneText;

        return output;
      }
    };
  });

片刻库非常好,任何时候我必须处理日期我会包含它,因为它很小。它还有一些非常强大的时区工具。您可以使用时区工具展开上面的过滤器,使其与DST和时区一起使用,偏移量不超过一小时,例如印度。

更新: 在查看当前时区库之后,我们实际上可以简化过滤器代码。第一个解决方案更像是一个黑客,这个解决方案更加健壮,因为我们将保留原始时区数据。此外,我已将格式和时区转换分为两个单独的过滤器。您可以在this plunker中看到演示。

以下是转换时区的过滤器:

angular
  .module('plunker')
  .filter('convertTimezone', function() {
    return function(input, timezone) {
      var output;

      // use clone to prevent side-effects
      output = input.clone().tz(timezone);

      // if the timezone was not valid, moment will not do anything, you may
      // want this to log if there was an issue
      if (moment.isMoment(output)) {
        return output;
      } else {
        // log error...    
        return input;
      }
    };
  });

时区库允许您将字符串传递给moment.tz()方法,如果知道该字符串将发生转换,如果不是,则不会进行任何更改。 clone()方法是一种更好的预防副作用的方法,然后像之前一样使用angular.copy。

现在这里是新的格式过滤器,类似于之前:

angular
  .module('plunker')
  .filter('formatTime', function() {
    return function(input, format) {

      // check to make sure a moment object was passed
      if (!moment.isMoment(input)) {
        // do nothing
        return input;
      } else {
        return input.format(format);
      }
    };
  });

总之,时刻时区库非常有用!

答案 1 :(得分:0)

根据Angular Docs:

  

时区

     

Angular日期时间过滤器使用的时区设置   浏览器。相同的应用程序将显示不同的时间信息   取决于计算机的时区设置   应用程序正在运行。目前还没有JavaScript和Angular   支持使用指定的时区显示日期   显影剂。

您是否看过momentjs和/或angular-moment