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

查看:3041
本文介绍了在不同的时区Angularjs显示时间戳日期的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我可以适当地只使用日期显示所选时间戳为本地时间为时间戳:'中'

我要实现的是,虽然显示此时间戳在一定的时区是什么,例如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.

原因:显示时间到用户的preferred区设置,即使他们目前在一个国家与另一个时区

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中重要的是,所有时区的引用参考时区,其中正在执行的code系统,其上的你无法控制的。你甚至不能相信客户端计算机有正确的时区设置。因此,当你选择一个选项,以显示一个时区,都可以做的就是给你客户端的时区。

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,你可以使用像我写了一首歌的一个过滤器这plunker 格式化日期和他们操纵用户的preferred时区。这里仅仅是样品过滤器code:

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

当下库是相当不错的,只要我有日期的工作,我会包括它,因为它是很小的。它也有一些颇具实力的时区的工具。你可以展开上述过滤器使用时区工具,使其与DST合作,并与偏移不在整整一个小时,如印度的时区。

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.

更新:
看着此刻的时区库之后,我们实际上可以简化筛选code。第一个解决方案更是一个黑客攻击,该解决方案更强大,我们将保留原单时区的数据。另外,我打破了格式化和时区转换成两个独立的过滤器。你可以看到在这个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()方法,如果该字符串被称为转换会发生,如果不是没有变化将会作出修改。该clone()方法是preventing副作用更好的方法,然后使用angular.copy像我一样了。

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

综上所述,当下时区图书馆是非常有用的!

In summary, the moment timezone library is quite useful!

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆