JSFiddle - React, Tailwind, and code Playground

by Vivek Athalye

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.0/moment-timezone-with-data.min.js"></script>
<div id="timesDiv">
</div>
<table id="times">
<thead>
<tr>
  <td>Name</td>
  <td>Abbr</td>
  <td>Offsets</td>
  <td>Untils</td>
</tr>
</thead>
<tbody>
</tbody>
</table>

CSS

#timesDiv div span{
  display: inline-block;
  padding: 5px;
}
.city{
  width: 150px;
}
.zone{
  width: 50px;
}
.time{
  width: 250px;
}

JavaScript

$(function(){
var cities = [
	["New York", "-05.00"],
  ["Washington", "-05.00"],
  ["Beijing", "+08.00"],
  ["Boston", "-05.00"],
  ["Delhi", "+05.50"],
  ["Tokyo", "+09.00"]
];

var m = moment();
for(i in cities){
  var c = cities[i];
  var d = $("<div>");
  d.appendTo("#timesDiv");
  $("<span class='city'>").text(c[0]).appendTo(d);
  $("<span class='zone'>").text(c[1]).appendTo(d);
  $("<span class='time'>").text(m.utcOffset(new Number(c[1])*60).format("LT")).appendTo(d);
}


//$("#timesDiv").text(JSON.stringify(moment.tz._zones));
for(tz in moment.tz._zones)
{
var unpacked = moment.tz.unpack(moment.tz._zones[tz]);
//$("#times tbody").text(JSON.stringify(moment.tz._zones));
$tr = $("<tr>");
$td1 = $("<td>").text(unpacked.name);
$td2 = $("<td>").text(unpacked.abbrs);
$td3 = $("<td>").text(unpacked.offsets);
$td4 = $("<td>").text(unpacked.untils);

$tr.append($td1).append($td2).append($td3).append($td4);
$("#times tbody").append($tr);
}
$("#times").hide();

});