Moment.js&具有数据属性时区的时刻时区

时间:2014-06-24 21:46:44

标签: javascript jquery time timezone momentjs

我有一个服务器生成的country/city格式的位置列表,即

<span class="location" data-timeZoneID="China/Beijing">Beijing</span>
<span class="location" data-timeZoneID="England/London">London</span>

我想使用JS / Jquery和Moment Timezone执行此操作:

  1. 从每个项目中提取data-timezone-属性
  2. 将其提供给moment.tz()
  3. 的实例
  4. 并附加带有结果的元素,从而在列出的任何位置显示时间。
  5. 编辑:我成功地使用jQuery提取数据属性值,但是当我尝试将它们传递给moment().tz()时;时间未转换,而是显示本地客户端时间。当我手动输入IANA时区ID时,会发生转换(尽管仍然不准确)。关于为什么data-attribute提供的价值不起作用的任何想法?

    这(sortof)有效:

    $(function(){
        $('.location').each(function() {
            var timeZone = $(this).data('timezoneid');
            var now = moment().tz('Africa/Tripoli').format("MM/DD/YYYY hh:mm");
            $(this).append( now );
        });
    });
    

    这不显示(显示当地时间):

    HTML

    <span class="location" data-timeZoneID="Africa/Tripoli">Tripoli: </span><br />
    <span class="location" data-timeZoneID="England/London">London: </span>
    

    JS

    $(function(){
        $('.location').each(function() {
            var timeZone = $(this).data('timezoneid');
            var now = moment().tz("'" + timeZone + "'").format("MM/DD/YYYY hh:mm");
            $(this).append( now );
        });
    });
    

    的jsfiddle

    link

2 个答案:

答案 0 :(得分:1)

有点难以理解你的问题,但考虑到你的步骤&#34; -list我会做以下事情:

$(function(){
    $('.location').each(function() {
        var timeZone = $(this).data('timeZoneID');
        var now = moment().tz(timeZone).format('HH:MM');
        $(this).append( now );
    });
});

DEMO

答案 1 :(得分:1)

这是一个可行的JSFiddle

http://jsfiddle.net/93pEd/1/

请注意我所做的两项更改:

 - London is Europe/London instead of England/London
 - the format is HH:mm instead of HH:MM