2020 年 11 月 1 日

IT Skills 波林

Polin WEI – 資訊工作者的技術手札

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

1 min read
紙箱王

紙箱王

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>

 

 

Copyright © All rights reserved. | Newsphere by AF themes.