Angularjs 在不同时区显示时间戳日期 [英] Angularjs display timestamp date in different timezones

问题描述

只需使用 date:'medium'，我就可以将选定的时间戳正确显示为该时间戳的本地时间.

I can properly display a selected timestamp to the local time for that timestamp by just using date:'medium'.

我想要实现的是在某个时区显示这个时间戳，例如 UTC+03:00 或 GMT+03:00 只是为了举个例子.

What I want to achieve though is displaying this timestamp in a certain timezone, for example UTC+03:00 or GMT+03:00 just to give an example.

我试过使用

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

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

None of these seem to change the timestamp time to the time it would be in that timezone.

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

Reason: displaying the time to the user's preferred timezone setting, even if they are currently in a country with another timezone.

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

Does anyone know how I can properly display the timestamp to a specified timezone?

推荐答案

关于 Javascript 需要了解的重要一点是，所有对时区的引用都是指正在执行代码的系统上的时区，您没有控制.您甚至不能相信客户端机器设置了正确的时区.因此，当您选择显示时区的选项时，您所能做的就是为您提供客户的时区.

The important thing to know about Javascript is that all the references to timezones refer to the timezone on the system where the code is being executed, of which you have no control. You can't even trust the client machine to have the correct timezone set. So when you select an option to display a timezone, all that can be done is give you the client's timezone.

JavaScript 中的时区可能会变得复杂，这里有一篇博客文章 非常详细，并提供了解决方案.

Timezones in JavaScript can get complicated, here a blog post that goes into quite some detail and provides solutions.

处理时区的一种简单方法是以UTC格式存储我的所有日​​期，然后在需要显示它们时使用moment.JS库格式化它们.假设您所有的时间都存储在 UTC 中，您可以使用我在 this plunker<中编写的过滤器/a> 格式化您的日期并将它们操作为用户的首选时区.这里只是示例过滤器代码:

One simple way to handle timezones is to store all my dates in UTC, and then format them using the moment.JS library when it comes time to display them. Assuming all your times are stored in UTC, you could use a filter like the one I've written in this plunker to format your dates and manipulate them to the user's preferred timezone. Here is just the sample filter code:

// 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;
      }
    };
  });

时刻库非常好，无论何时我必须处理日期，我都会包括它，因为它很小.它还具有一些非常强大的时区工具.您可以使用时区工具扩展上面的过滤器，使其适用于夏令时和偏移量不是一小时的时区，例如印度.

The moment library is quite nice, anytime I have to work with dates I'll include it, as it is small. It also has some quite powerful timezone tools. You could expand the filter above using the timezone tools to make it work with DST and timezones with offsets that aren't exactly one hour, such as India.

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

UPDATE: After looking at the moment timezone library, we can actually simplify the filter code. The first solution was more of a hack, this solution is much more robust as we will keep the orginal timezone data. Also, I've broken the formatting and timezone conversion into two separate filters. You can see a demo in this plunker.

这是转换时区的过滤器:

Here is a filter to convert timezones:

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() 方法，如果该字符串已知，则将进行转换，否则不会进行任何更改.与之前一样使用 angular.copy 相比，clone() 方法是防止副作用的更好方法.

The timezone library allows you to pass a string to the moment.tz() method, if that string is known the conversion will happen, if not no change will be made. The clone() method is a better way of preventing side-effects then using angular.copy as I did before.

现在是新的格式过滤器，与之前类似:

Now here is the new format filter, similar to before:

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

总而言之，moment timezone 库非常有用！

In summary, the moment timezone library is quite useful!

这篇关于Angularjs 在不同时区显示时间戳日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！