Vue

by khamer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="http://momentjs.com/downloads/moment.js"></script>
<script src="http://momentjs.com/downloads/moment-timezone-with-data.js"></script>
<div id="app">
  <time v-text="moment(now).format('LT')"></time>
  <ul>
    <li v-for="zone in zones">
      <span v-text="zone"></span>
      <time v-text="moment(now).tz(zone).format()"></time>
    </li>
  </ul>
</div>

JavaScript

new Vue({
  el: "#app",
  data: () => ({
    now: moment(),
    zones: [
      'Atlantic/Reykjavik', 'Europe/London', 'Europe/Berlin', 'Europe/Kiev', 'Asia/Tehran', 'Asia/Dubai', 'Asia/Kabul', 'Indian/Maldives', 'Asia/Kolkata', 'Asia/Kathmandu', 'Asia/Urumqi', 'Asia/Yangon', 'Asia/Bangkok', 'Asia/Singapore', 'Australia/Eucla', 'Asia/Tokyo', 'Australia/Darwin', 'Australia/Brisbane', 'Australia/Lord_Howe', 'Australia/Broken_Hill', 'Asia/Kamchatka', 'Pacific/Chatham', 'Pacific/Enderbury', 'Pacific/Kiritimati', 'Atlantic/Cape_Verde', 'America/Noronha', 'America/Argentina/Buenos_Aires', 'America/St_Johns', 'America/Puerto_Rico', 'America/Cancun', 'America/Costa_Rica', 'America/Phoenix', 'America/Los_Angeles', 'America/Anchorage', 'Pacific/Gambier', 'Pacific/Marquesas', 'Pacific/Honolulu', 'Pacific/Samoa',


    ],
  }),
  created() {
    //setInterval(() => this.now = moment(), 1000);
  },
});