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>
你必須 登入 才能發表評論。