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

Question

I've got a server-generated list of locations in country/city format, ie

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

I'd like to use JS/Jquery and Moment Timezone do this:

1. Pull the data-timezone- attribute from each item
2. Supply it to an instance of moment.tz() ,
3. And append the element with the result, thus displaying the time in whatever locations are listed.

EDIT : I'm successfully pulling the data-attribute values with jQuery, but when I try to pass them to moment().tz() ; the time is not converted and my local client time is displayed instead. When I manually enter an IANA time zone ID, the conversion happens (although it's still inaccurate). Any thoughts on why the value supplied from the data-attribute wouldn't be working?

This (sortof) works:

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

This doesn't (local time is displayed):

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

Answer 1

It was a little hard to understand what your problem it but considering your "step by step"-list I would have done the following:

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

DEMO

Answer 2

Here's a JSFiddle that works

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

Notice the 2 changes that I made:

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