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 -->
    <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>
import { LightningElement,api } from 'lwc';
import momentTZ from '@salesforce/resourceUrl/moment';
import { loadScript } from 'lightning/platformResourceLoader';

export default class TimezonePicklist extends LightningElement {
    initialized = false;
    timezoneOptions = [];

        //need to load moment.js first then moment - timezone.
        loadScript(this, momentTZ+'/moment.js')
            loadScript(this, momentTZ+'/momenttz.js')
                this.currentTZ =;
                this.timezoneOptions =
                .reduce((tzList,tz) => {
                    const timezone = ?'Z') : '';
                    tzList.push({key:tz,value:tz,label:`(GMT${timezone}) ${tz}`,});
                    return tzList;
                    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;