
There are several ways to generate the timezone list in LWC. You can create an AuraEnable method to utilize User.TimeZoneSidKey.getDescribe().picklistValues; however, this will cost you API calls.
You can hardcode it, but then you have to retouch it whenever an update is needed.
With moment.js and its plug-in moment-timezone.js, you not only generate the complete list of timezones but also can be utilized to deal with all types of timezone issues throughout your app.
I use datalist for OTB autocomplete feature; This can be used as picklist.
<!--html template -->
<template>
<input id="input" name="input" value={currentTZ} type="text" />
<datalist id="valueList">
<template for:each={timezoneOptions} for:item='item'>
<option key={item.key} value={item.value}>{item.label}</option>
</template>
</datalist>
</template>
import { LightningElement,api } from 'lwc';
import momentTZ from '@salesforce/resourceUrl/moment';
import { loadScript } from 'lightning/platformResourceLoader';
export default class TimezonePicklist extends LightningElement {
initialized = false;
currentDate;
timezoneOptions = [];
currentTZ;
connectedCallback(){
//need to load moment.js first then moment - timezone.
loadScript(this, momentTZ+'/moment.js')
.then(()=>{
loadScript(this, momentTZ+'/momenttz.js')
.then(()=>{
this.currentTZ = moment.tz.guess();
this.timezoneOptions = moment.tz.names()
.reduce((tzList,tz) => {
const timezone = moment.tz(tz).utcOffset() ? moment.tz(tz).format('Z') : '';
tzList.push({key:tz,value:tz,label:`(GMT${timezone}) ${tz}`,offset:moment.tz(tz).utcOffset()});
return tzList;
},[]).sort((a,b)=>{
return a.offset-b.offset;
})
let listId = this.template.querySelector('datalist').id;
this.template.querySelector("input").setAttribute("list", listId);
})
})
}
}
Note: When loading moment-timezone; you will need to load moment.js first. To do that, just use the loadScript().then. There are errors if using promise.all.
To get user’s current timezone, use moment.tz.guess();