Element UI 使用 moment-timezone.js 作 Time Zone selector

Element UI 使用 moment-timezone.js 作 Time Zone selector

Time Zone 時區的選擇，是大型專案中常會考慮的，就如同 Spring Boot 多語系設置(國際化) 一樣，可以使用 moment.js & moment-timezone-with-data.js  兩個 javascript 相互搭配，就可以輕易達成想要的時區清單。

<script src="/js/moment/moment.min.js"></script>
<script src="/js/moment/moment-timezone-with-data.min.js"></script>
<script>
var timezones = moment.tz.names();

var offsetTmz=[];
for(var i in timezones)
{
    offsetTmz.push(" (GMT"+moment.tz(timezones[i]).format('Z')+")" + timezones[i]);
};

</script>

利用上述的 JS 程式，可以得到下面的效果，主要是用 moment.tz.names(); 函式來取得所有的時區名稱，再作迴圈處理即可。

(GMT +01:00) Africa/Brazzaville
(GMT +01:00) Africa/Casablanca
(GMT +01:00) Africa/Douala
(GMT +01:00) Africa/El_Aaiun
(GMT +01:00) Africa/Kinshasa
(GMT +01:00) Africa/Lagos
(GMT +01:00) Africa/Libreville
(GMT +01:00) Africa/Luanda
(GMT +01:00) Africa/Malabo
(GMT +01:00) Africa/Ndjamena
(GMT +01:00) Africa/Niamey

知道原理後，現在來看如何使用 Element UI 中的 el-select 來實作。首先，HTML部份，先將模板撰寫如下：

<el-form-item prop="timeZone" label="timeZone">
  <el-select v-model="timeZone" placeholder="Select" style="width:100%">
 <el-option 
   v-for="item in timezoneList"
   :key="item.value"
   :label="item.label"
   :value="item.value">
 </el-option>
  </el-select>
</el-form-item>

在 javascript 的程式中，這裡使用 map 函式，逐一將時區名取出，然後加工一下，產生出 label & value ，再放入 tzList 陣列裡。這樣就完成了，簡單吧!

<script src="/js/moment/moment.min.js"></script>
<script src="/js/moment/moment-timezone-with-data.min.js"></script>
<script>
var timezones = moment.tz.names();
var tzList = timezones.map(function(item){
 return {
  label: " (GMT"+moment.tz(item).format('Z')+") - " + item,
  value: item,
 }
});

var App = new Vue({
    el: "#app",
    data() {      
      return {
          timezoneList: tzList,
      };
    },
})
</script>