<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.20/moment-timezone.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.20/moment-timezone-with-data.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Moment-timezone!</h1>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<td>London</td>
<td>Sydney</td>
<td>Beijing</td>
<td>Tokyo</td>
<td>San Francisco</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="clock" id="london"></div>
<br/>
</td>
<td>
<div class="clock" id="sydney"></div>
<br/>
</td>
<td>
<div class="clock" id="beijing"></div>
<br/>
</td>
<td>
<div class="clock" id="tokyo"></div>
<br/>
</td>
<td>
<div class="clock" id="la"></div>
<br/>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
$(function() {
var london = moment.tz("Europe/London").format('MMMM Do YYYY, h:mm:ss a');
var athens = moment.tz("Europe/Athens").format('MMMM Do YYYY, h:mm:ss a');
var sydney = moment.tz("Australia/Sydney").format('MMMM Do YYYY, h:mm:ss a');
var beijing = moment.tz("China/Beijing").format('MMMM Do YYYY, h:mm:ss a');
var tokyo = moment.tz("Asia/Tokyo").format('MMMM Do YYYY, h:mm:ss a');
var la = moment.tz("America/Los_Angeles").format('MMMM Do YYYY, h:mm:ss a');
var custom = moment.tz('2018-06-24 20:00', "Australia/Sydney").format('MMMM Do YYYY, h:mm:ss a');
console.log(athens);
console.log(custom);
$("#london").text(london);
$("#sydney").text(sydney);
$("#beijing").text(beijing);
$("#tokyo").text(tokyo);
$("#la").text(la);
function update() {
$('#la').html(moment().format('MMMM Do YYYY, h:mm:ss a'));
}
setInterval(update, 1000);
var cutoffString = '20170421 16:30:00'; // in utc
var utcCutoff = moment.utc(cutoffString, 'YYYYMMDD HH:mm:ss');
var displayCutoff = utcCutoff.clone().tz('Europe/Athens');
console.log('utcCutoff:', utcCutoff.format('YYYYMMDD hh:mm:ssa Z')); // => utcCutoff: 20170421 04:30:00pm +00:00
console.log('displayCutoff:', displayCutoff.format('YYYYMMDD hh:mm:ssa Z')); // => displayCutoff: 20170421 12:30:00pm -04:00
var d = new Date();
console.log(d);
var m = moment.tz("Asia/Tokyo");
console.log(m.format('MMMM Do YYYY, h:mm:ss a'));
console.log(m.utc().format('MMMM Do YYYY, h:mm:ss a'));
});
/* Styles go here */