Moment JS Countdown Clock

index.html

<div id="clock"></div>
<div class="days"></div>
<div class="hours"></div>
<div class="minutes"></div>
<div class="seconds"></div>

<select class="form-control" id="selectTimezone"
        onchange="run()">
<option value='Pacific/Midway' >(UTC-11:00) Midway Island</option>
<option value='Pacific/Samoa' >(UTC-11:00) Samoa</option>
<option value='Pacific/Honolulu' >(UTC-10:00) Hawaii</option>
<option value='US/Alaska' >(UTC-09:00) Alaska</option>
<option value='America/Los_Angeles' >(UTC-08:00) Pacific Time (US &amp; Canada)</option>
<option value='America/Tijuana' >(UTC-08:00) Tijuana</option>
<option value='US/Arizona' >(UTC-07:00) Arizona</option>
<option value='America/Chihuahua' >(UTC-07:00) Chihuahua</option>
<option value='America/Chihuahua' >(UTC-07:00) La Paz</option>
<option value='America/Mazatlan' >(UTC-07:00) Mazatlan</option>
<option value='US/Mountain' >(UTC-07:00) Mountain Time (US &amp; Canada)</option>
<option value='America/Managua' >(UTC-06:00) Central America</option>
<option value='US/Central' >(UTC-06:00) Central Time (US &amp; Canada)</option>
<option value='America/Mexico_City' >(UTC-06:00) Guadalajara</option>
<option value='America/Mexico_City' >(UTC-06:00) Mexico City</option>
<option value='America/Monterrey' >(UTC-06:00) Monterrey</option>
<option value='Canada/Saskatchewan' >(UTC-06:00) Saskatchewan</option>
<option value='America/Bogota' >(UTC-05:00) Bogota</option>
<option value='US/Eastern' >(UTC-05:00) Eastern Time (US &amp; Canada)</option>
<option value='US/East-Indiana' >(UTC-05:00) Indiana (East)</option>
<option value='America/Lima' >(UTC-05:00) Lima</option>
<option value='America/Bogota' >(UTC-05:00) Quito</option>
<option value='Canada/Atlantic' >(UTC-04:00) Atlantic Time (Canada)</option>
<option value='America/Caracas' >(UTC-04:30) Caracas</option>
<option value='America/La_Paz' >(UTC-04:00) La Paz</option>
<option value='America/Santiago' >(UTC-04:00) Santiago</option>
<option value='Canada/Newfoundland' >(UTC-03:30) Newfoundland</option>
<option value='America/Sao_Paulo' >(UTC-03:00) Brasilia</option>
<option value='America/Argentina/Buenos_Aires' >(UTC-03:00) Buenos Aires</option>
<option value='America/Argentina/Buenos_Aires' >(UTC-03:00) Georgetown</option>
<option value='America/Godthab' >(UTC-03:00) Greenland</option>
<option value='America/Noronha' >(UTC-02:00) Mid-Atlantic</option>
<option value='Atlantic/Azores' >(UTC-01:00) Azores</option>
<option value='Atlantic/Cape_Verde' >(UTC-01:00) Cape Verde Is.</option>
<option value='Africa/Casablanca' >(UTC+00:00) Casablanca</option>
<option value='Europe/London' >(UTC+00:00) Edinburgh</option>
<option value='Etc/Greenwich' >(UTC+00:00) Greenwich Mean Time : Dublin</option>
<option value='Europe/Lisbon' >(UTC+00:00) Lisbon</option>
<option value='Europe/London' >(UTC+00:00) London</option>
<option value='Africa/Monrovia' >(UTC+00:00) Monrovia</option>
<option value='UTC' >(UTC+00:00) UTC</option>
<option value='Europe/Amsterdam' >(UTC+01:00) Amsterdam</option>
<option value='Europe/Belgrade' >(UTC+01:00) Belgrade</option>
<option value='Europe/Berlin' >(UTC+01:00) Berlin</option>
<option value='Europe/Berlin' >(UTC+01:00) Bern</option>
<option value='Europe/Bratislava' >(UTC+01:00) Bratislava</option>
<option value='Europe/Brussels' >(UTC+01:00) Brussels</option>
<option value='Europe/Budapest' >(UTC+01:00) Budapest</option>
<option value='Europe/Copenhagen' >(UTC+01:00) Copenhagen</option>
<option value='Europe/Ljubljana' >(UTC+01:00) Ljubljana</option>
<option value='Europe/Madrid' >(UTC+01:00) Madrid</option>
<option value='Europe/Paris' >(UTC+01:00) Paris</option>
<option value='Europe/Prague' >(UTC+01:00) Prague</option>
<option value='Europe/Rome' >(UTC+01:00) Rome</option>
<option value='Europe/Sarajevo' >(UTC+01:00) Sarajevo</option>
<option value='Europe/Skopje' >(UTC+01:00) Skopje</option>
<option value='Europe/Stockholm' >(UTC+01:00) Stockholm</option>
<option value='Europe/Vienna' >(UTC+01:00) Vienna</option>
<option value='Europe/Warsaw' >(UTC+01:00) Warsaw</option>
<option value='Africa/Lagos' >(UTC+01:00) West Central Africa</option>
<option value='Europe/Zagreb' >(UTC+01:00) Zagreb</option>
<option value='Europe/Athens' >(UTC+02:00) Athens</option>
<option value='Europe/Bucharest' >(UTC+02:00) Bucharest</option>
<option value='Africa/Cairo' >(UTC+02:00) Cairo</option>
<option value='Africa/Harare' >(UTC+02:00) Harare</option>
<option value='Europe/Helsinki' >(UTC+02:00) Helsinki</option>
<option value='Europe/Istanbul' >(UTC+02:00) Istanbul</option>
<option value='Asia/Jerusalem' >(UTC+02:00) Jerusalem</option>
<option value='Europe/Helsinki' >(UTC+02:00) Kyiv</option>
<option value='Africa/Johannesburg' >(UTC+02:00) Pretoria</option>
<option value='Europe/Riga' >(UTC+02:00) Riga</option>
<option value='Europe/Sofia' >(UTC+02:00) Sofia</option>
<option value='Europe/Tallinn' >(UTC+02:00) Tallinn</option>
<option value='Europe/Vilnius' >(UTC+02:00) Vilnius</option>
<option value='Asia/Baghdad' >(UTC+03:00) Baghdad</option>
<option value='Asia/Kuwait' >(UTC+03:00) Kuwait</option>
<option value='Europe/Minsk' >(UTC+03:00) Minsk</option>
<option value='Africa/Nairobi' >(UTC+03:00) Nairobi</option>
<option value='Asia/Riyadh' >(UTC+03:00) Riyadh</option>
<option value='Europe/Volgograd' >(UTC+03:00) Volgograd</option>
<option value='Asia/Tehran' >(UTC+03:30) Tehran</option>
<option value='Asia/Muscat' >(UTC+04:00) Abu Dhabi</option>
<option value='Asia/Baku' >(UTC+04:00) Baku</option>
<option value='Europe/Moscow' >(UTC+04:00) Moscow</option>
<option value='Asia/Muscat' >(UTC+04:00) Muscat</option>
<option value='Europe/Moscow' >(UTC+04:00) St. Petersburg</option>
<option value='Asia/Tbilisi' >(UTC+04:00) Tbilisi</option>
<option value='Asia/Yerevan' >(UTC+04:00) Yerevan</option>
<option value='Asia/Kabul' >(UTC+04:30) Kabul</option>
<option value='Asia/Karachi' >(UTC+05:00) Islamabad</option>
<option value='Asia/Karachi' >(UTC+05:00) Karachi</option>
<option value='Asia/Tashkent' >(UTC+05:00) Tashkent</option>
<option value='Asia/Calcutta' >(UTC+05:30) Chennai</option>
<option value='Asia/Kolkata' >(UTC+05:30) Kolkata</option>
<option value='Asia/Calcutta' >(UTC+05:30) Mumbai</option>
<option value='Asia/Calcutta' >(UTC+05:30) New Delhi</option>
<option value='Asia/Calcutta' >(UTC+05:30) Sri Jayawardenepura</option>
<option value='Asia/Katmandu' >(UTC+05:45) Kathmandu</option>
<option value='Asia/Almaty' >(UTC+06:00) Almaty</option>
<option value='Asia/Dhaka' >(UTC+06:00) Astana</option>
<option value='Asia/Dhaka' >(UTC+06:00) Dhaka</option>
<option value='Asia/Yekaterinburg' >(UTC+06:00) Ekaterinburg</option>
<option value='Asia/Rangoon' >(UTC+06:30) Rangoon</option>
<option value='Asia/Bangkok' >(UTC+07:00) Bangkok</option>
<option value='Asia/Bangkok' >(UTC+07:00) Hanoi</option>
<option value='Asia/Jakarta' >(UTC+07:00) Jakarta</option>
<option value='Asia/Novosibirsk' >(UTC+07:00) Novosibirsk</option>
<option value='Asia/Hong_Kong' >(UTC+08:00) Beijing</option>
<option value='Asia/Chongqing' >(UTC+08:00) Chongqing</option>
<option value='Asia/Hong_Kong' >(UTC+08:00) Hong Kong</option>
<option value='Asia/Krasnoyarsk' >(UTC+08:00) Krasnoyarsk</option>
<option value='Asia/Kuala_Lumpur' >(UTC+08:00) Kuala Lumpur</option>
<option value='Australia/Perth' >(UTC+08:00) Perth</option>
<option value='Asia/Singapore' >(UTC+08:00) Singapore</option>
<option value='Asia/Taipei' >(UTC+08:00) Taipei</option>
<option value='Asia/Ulan_Bator' >(UTC+08:00) Ulaan Bataar</option>
<option value='Asia/Urumqi' >(UTC+08:00) Urumqi</option>
<option value='Asia/Irkutsk' >(UTC+09:00) Irkutsk</option>
<option value='Asia/Tokyo' >(UTC+09:00) Osaka</option>
<option value='Asia/Tokyo' >(UTC+09:00) Sapporo</option>
<option value='Asia/Seoul' >(UTC+09:00) Seoul</option>
<option value='Asia/Tokyo' >(UTC+09:00) Tokyo</option>
<option value='Australia/Adelaide' >(UTC+09:30) Adelaide</option>
<option value='Australia/Darwin' >(UTC+09:30) Darwin</option>
<option value='Australia/Brisbane' >(UTC+10:00) Brisbane</option>
<option value='Australia/Canberra' >(UTC+10:00) Canberra</option>
<option value='Pacific/Guam' >(UTC+10:00) Guam</option>
<option value='Australia/Hobart' >(UTC+10:00) Hobart</option>
<option value='Australia/Melbourne' >(UTC+10:00) Melbourne</option>
<option value='Pacific/Port_Moresby' >(UTC+10:00) Port Moresby</option>
<option value='Australia/Sydney' >(UTC+10:00) Sydney</option>
<option value='Asia/Yakutsk' >(UTC+10:00) Yakutsk</option>
<option value='Asia/Vladivostok' >(UTC+11:00) Vladivostok</option>
<option value='Pacific/Auckland' >(UTC+12:00) Auckland</option>
<option value='Pacific/Fiji' >(UTC+12:00) Fiji</option>
<option value='Pacific/Kwajalein' >(UTC+12:00) International Date Line West</option>
<option value='Asia/Kamchatka' >(UTC+12:00) Kamchatka</option>
<option value='Asia/Magadan' >(UTC+12:00) Magadan</option>
<option value='Pacific/Fiji' >(UTC+12:00) Marshall Is.</option>
<option value='Asia/Magadan' >(UTC+12:00) New Caledonia</option>
<option value='Asia/Magadan' >(UTC+12:00) Solomon Is.</option>
<option value='Pacific/Auckland' >(UTC+12:00) Wellington</option>
<option value='Pacific/Tongatapu' >(UTC+13:00) Nuku'alofa</option>
</select>

moment-js-countdown-clock.markdown

Moment JS Countdown Clock

A simple countdown clock using moment JS allowing for full customitaion.

A Pen by Edward Lance Lorilla on CodePen.

License.

script.js

var myInterval;// Used to save previous interval if one has been started
function run(){
  var timeZone = document.getElementById("selectTimezone");
  
  var i = timeZone.selectedIndex;
  var removeParenthesis = timeZone.options[i].text.replace(/[()]/g, '')
  var splitString = removeParenthesis.split(' ')
  var d = new Date('Nov 1, 2017 ' + ' ' +  splitString[0])
  
  var $clock = $('#clock'),
      eventTime = moment(d.getTime()).unix(),
      currentTime = moment(new Date().getTime()).unix(),
      diffTime = eventTime - currentTime,
      duration = moment.duration(diffTime * 1000, 'milliseconds'),
      interval = 1000;
  
  // if time to countdown
  if(diffTime > 0) {
    
    // Show clock
    // $clock.show();
    
    clearInterval(myInterval);
    myInterval = setInterval(function(){
      
      duration = moment.duration(duration.asMilliseconds() - interval, 'milliseconds');
      var d = moment.duration(duration).days(),
          h = moment.duration(duration).hours(),
          m = moment.duration(duration).minutes(),
          s = moment.duration(duration).seconds();
      
      d = $.trim(d).length === 1 ? '0' + d : d;
      h = $.trim(h).length === 1 ? '0' + h : h;
      m = $.trim(m).length === 1 ? '0' + m : m;
      s = $.trim(s).length === 1 ? '0' + s : s;
      
      // show how many hours, minutes and seconds are left
      $('.days').text(d + 'days');
      $('.hours').text(h + 'hours');
      $('.minutes').text(m + 'minutes');
      $('.seconds').text(s + 'seconds');
      
    }, interval);
    
  }  
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>

guys, if you need a nice list of timezone for moment..

var timeZonelist = [
{
"value": "Dateline Standard Time",
"abbr": "DST",
"offset": -12,
"isdst": false,
"text": "(UTC-12:00) International Date Line West",
"timezone":"Pacific/Wallis"
},
{
"value": "UTC-11",
"abbr": "U",
"offset": -11,
"isdst": false,
"text": "(UTC-11:00) Coordinated Universal Time-11",
"timezone":"Pacific/Pago_Pago"
},
{
"value": "Hawaiian Standard Time",
"abbr": "HST",
"offset": -10,
"isdst": false,
"text": "(UTC-10:00) Hawaii",
"timezone":"US/Hawaii"
},
{
"value": "Alaskan Standard Time",
"abbr": "AKDT",
"offset": -9,
"isdst": true,
"text": "(UTC-09:00) Alaska",
"timezone":"US/Alaska"
},
{
"value": "Pacific Standard Time (Mexico)",
"abbr": "PDT",
"offset": -8,
"isdst": true,
"text": "(UTC-08:00) Baja California",
"timezone":"America/Pacific"
},
{
"value": "Pacific Standard Time",
"abbr": "PDT",
"offset": -8,
"isdst": true,
"text": "(UTC-08:00) Pacific Time (US & Canada)",
"timezone":"America/Pacific"
},
{
"value": "US Mountain Standard Time",
"abbr": "UMST",
"offset": -7,
"isdst": false,
"text": "(UTC-07:00) Arizona",
"timezone":"America/Mountain"
},
{
"value": "Mountain Standard Time (Mexico)",
"abbr": "MDT",
"offset": -7,
"isdst": true,
"text": "(UTC-07:00) Chihuahua, La Paz, Mazatlan",
"timezone":"America/Chihuahua"
},
{
"value": "Mountain Standard Time",
"abbr": "MDT",
"offset": -7,
"isdst": true,
"text": "(UTC-07:00) Mountain Time (US & Canada)",
"timezone":"US/Mountain"
},
{
"value": "Central America Standard Time",
"abbr": "CAST",
"offset": -6,
"isdst": false,
"text": "(UTC-06:00) Central America",
"timezone":"America/Managua"
},
{
"value": "Central Standard Time",
"abbr": "CDT",
"offset": -6,
"isdst": true,
"text": "(UTC-06:00) Central Time (US & Canada)",
"timezone":"US/Central"
},
{
"value": "Central Standard Time (Mexico)",
"abbr": "CDT",
"offset": -6,
"isdst": true,
"text": "(UTC-06:00) Guadalajara, Mexico City, Monterrey",
"timezone":"America/Mexico_City"
},
{
"value": "Canada Central Standard Time",
"abbr": "CCST",
"offset": -6,
"isdst": false,
"text": "(UTC-06:00) Saskatchewan",
"timezone":"Canada/Saskatchewan"
},
{
"value": "SA Pacific Standard Time",
"abbr": "SPST",
"offset": -5,
"isdst": false,
"text": "(UTC-05:00) Bogota, Lima, Quito",
"timezone":"America/Lima"
},
{
"value": "Eastern Standard Time",
"abbr": "EDT",
"offset": -5,
"isdst": true,
"text": "(UTC-05:00) Eastern Time (US & Canada)",
"timezone":"US/Eastern"
},
{
"value": "US Eastern Standard Time",
"abbr": "UEDT",
"offset": -5,
"isdst": true,
"text": "(UTC-05:00) Indiana (East)",
"timezone":"US/East-Indiana"
},
{
"value": "Venezuela Standard Time",
"abbr": "VST",
"offset": -4.5,
"isdst": false,
"text": "(UTC-04:30) Caracas",
"timezone":"America/Caracas"
},
{
"value": "Paraguay Standard Time",
"abbr": "PST",
"offset": -4,
"isdst": false,
"text": "(UTC-04:00) Asuncion",
"timezone":"America/Santiago"
},
{
"value": "Atlantic Standard Time",
"abbr": "ADT",
"offset": -4,
"isdst": true,
"text": "(UTC-04:00) Atlantic Time (Canada)",
"timezone":"Canada/Atlantic"
},
{
"value": "Central Brazilian Standard Time",
"abbr": "CBST",
"offset": -4,
"isdst": false,
"text": "(UTC-04:00) Cuiaba",
"timezone":"America/Sao_Paulo"
},
{
"value": "SA Western Standard Time",
"abbr": "SWST",
"offset": -4,
"isdst": false,
"text": "(UTC-04:00) Georgetown, La Paz, Manaus, San Juan",
"timezone":"America/La_Paz"
},
{
"value": "Pacific SA Standard Time",
"abbr": "PSST",
"offset": -4,
"isdst": false,
"text": "(UTC-04:00) Santiago",
"timezone":"America/Santiago"
},
{
"value": "Newfoundland Standard Time",
"abbr": "NDT",
"offset": -3.5,
"isdst": true,
"text": "(UTC-03:30) Newfoundland",
"timezone":"Canada/Newfoundland"
},
{
"value": "E. South America Standard Time",
"abbr": "ESAST",
"offset": -3,
"isdst": false,
"text": "(UTC-03:00) Brasilia",
"timezone":"America/Sao_Paulo"
},
{
"value": "Argentina Standard Time",
"abbr": "AST",
"offset": -3,
"isdst": false,
"text": "(UTC-03:00) Buenos Aires",
"timezone":"America/Argentina/Buenos_Aires"
},
{
"value": "SA Eastern Standard Time",
"abbr": "SEST",
"offset": -3,
"isdst": false,
"text": "(UTC-03:00) Cayenne, Fortaleza",
"timezone":"America/Cayenne"
},
{
"value": "Greenland Standard Time",
"abbr": "GDT",
"offset": -3,
"isdst": true,
"text": "(UTC-03:00) Greenland",
"timezone":"America/Godthab"
},
{
"value": "Montevideo Standard Time",
"abbr": "MST",
"offset": -3,
"isdst": false,
"text": "(UTC-03:00) Montevideo",
"timezone":"America/Montevideo"
},
{
"value": "Bahia Standard Time",
"abbr": "BST",
"offset": -3,
"isdst": false,
"text": "(UTC-03:00) Salvador",
"timezone":"America/Montevideo"
},
{
"value": "UTC-02",
"abbr": "U",
"offset": -2,
"isdst": false,
"text": "(UTC-02:00) Coordinated Universal Time-02",
"timezone":"America/Godthab"
},
{
"value": "Mid-Atlantic Standard Time",
"abbr": "MDT",
"offset": -2,
"isdst": true,
"text": "(UTC-02:00) Mid-Atlantic - Old",
"timezone":"America/Noronha"
},
{
"value": "Azores Standard Time",
"abbr": "ADT",
"offset": -1,
"isdst": true,
"text": "(UTC-01:00) Azores",
"timezone":"Atlantic/Azores"
},
{
"value": "Cape Verde Standard Time",
"abbr": "CVST",
"offset": -1,
"isdst": false,
"text": "(UTC-01:00) Cape Verde Is.",
"timezone":"Atlantic/Cape_Verde"
},
{
"value": "Morocco Standard Time",
"abbr": "MDT",
"offset": 0,
"isdst": true,
"text": "(UTC) Casablanca",
"timezone":"Africa/Casablanca"
},
{
"value": "UTC",
"abbr": "CUT",
"offset": 0,
"isdst": false,
"text": "(UTC) Coordinated Universal Time",
"timezone":"Etc/Greenwich"
},
{
"value": "GMT Standard Time",
"abbr": "GDT",
"offset": 0,
"isdst": true,
"text": "(UTC) Dublin, Edinburgh, Lisbon, London",
"timezone":"Europe/London"
},
{
"value": "Greenwich Standard Time",
"abbr": "GST",
"offset": 0,
"isdst": false,
"text": "(UTC) Monrovia, Reykjavik",
"timezone":"Africa/Monrovia"
},
{
"value": "W. Europe Standard Time",
"abbr": "WEDT",
"offset": 1,
"isdst": true,
"text": "(UTC+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna",
"timezone":"Europe/Amsterdam"
},
{
"value": "Central Europe Standard Time",
"abbr": "CEDT",
"offset": 1,
"isdst": true,
"text": "(UTC+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague",
"timezone":"Europe/Budapest"
},
{
"value": "Romance Standard Time",
"abbr": "RDT",
"offset": 1,
"isdst": true,
"text": "(UTC+01:00) Brussels, Copenhagen, Madrid, Paris",
"timezone":"Europe/Paris"
},
{
"value": "Central European Standard Time",
"abbr": "CEDT",
"offset": 1,
"isdst": true,
"text": "(UTC+01:00) Sarajevo, Skopje, Warsaw, Zagreb",
"timezone":"Europe/Warsaw"
},
{
"value": "W. Central Africa Standard Time",
"abbr": "WCAST",
"offset": 1,
"isdst": false,
"text": "(UTC+01:00) West Central Africa",
"timezone":"Africa/Lagos"
},
{
"value": "Namibia Standard Time",
"abbr": "NST",
"offset": 1,
"isdst": false,
"text": "(UTC+01:00) Windhoek",
"timezone":"Africa/Windhoek"
},
{
"value": "GTB Standard Time",
"abbr": "GDT",
"offset": 2,
"isdst": true,
"text": "(UTC+02:00) Athens, Bucharest",
"timezone":"Europe/Athens"
},
{
"value": "Middle East Standard Time",
"abbr": "MEDT",
"offset": 2,
"isdst": true,
"text": "(UTC+02:00) Beirut",
"timezone":"Asia/Beirut"
},
{
"value": "Egypt Standard Time",
"abbr": "EST",
"offset": 2,
"isdst": false,
"text": "(UTC+02:00) Cairo",
"timezone":"Africa/Cairo"
},
{
"value": "Syria Standard Time",
"abbr": "SDT",
"offset": 2,
"isdst": true,
"text": "(UTC+02:00) Damascus",
"timezone":"Asia/Damascus"
},
{
"value": "E. Europe Standard Time",
"abbr": "EEDT",
"offset": 2,
"isdst": true,
"text": "(UTC+02:00) E. Europe",
"timezone":"Europe/London"
},
{
"value": "South Africa Standard Time",
"abbr": "SAST",
"offset": 2,
"isdst": false,
"text": "(UTC+02:00) Harare, Pretoria",
"timezone":"Africa/Harare"
},
{
"value": "FLE Standard Time",
"abbr": "FDT",
"offset": 2,
"isdst": true,
"text": "(UTC+02:00) Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius",
"timezone":"Europe/Helsinki"
},
{
"value": "Turkey Standard Time",
"abbr": "TDT",
"offset": 2,
"isdst": true,
"text": "(UTC+02:00) Istanbul",
"timezone":"Europe/Istanbul"
},
{
"value": "Israel Standard Time",
"abbr": "JDT",
"offset": 2,
"isdst": true,
"text": "(UTC+02:00) Jerusalem",
"timezone":"Asia/Jerusalem"
},
{
"value": "Libya Standard Time",
"abbr": "LST",
"offset": 2,
"isdst": false,
"text": "(UTC+02:00) Tripoli",
"timezone":"Africa/Tripoli"
},
{
"value": " Standard Time",
"abbr": "JST",
"offset": 3,
"isdst": false,
"text": "(UTC+03:00) Amman",
"timezone":"Asia/Amman"
},
{
"value": "Arabic Standard Time",
"abbr": "AST",
"offset": 3,
"isdst": false,
"text": "(UTC+03:00) Baghdad",
"timezone":"Asia/Baghdad"
},
{
"value": "Kaliningrad Standard Time",
"abbr": "KST",
"offset": 3,
"isdst": false,
"text": "(UTC+03:00) Kaliningrad, Minsk",
"timezone":"Europe/Minsk"
},
{
"value": "Arab Standard Time",
"abbr": "AST",
"offset": 3,
"isdst": false,
"text": "(UTC+03:00) Kuwait, Riyadh",
"timezone":"Asia/Kuwait"
},
{
"value": "E. Africa Standard Time",
"abbr": "EAST",
"offset": 3,
"isdst": false,
"text": "(UTC+03:00) Nairobi",
"timezone":"Africa/Nairobi"
},
{
"value": "Iran Standard Time",
"abbr": "IDT",
"offset": 3.5,
"isdst": true,
"text": "(UTC+03:30) Tehran",
"timezone":"Asia/Tehran"
},
{
"value": "Arabian Standard Time",
"abbr": "AST",
"offset": 4,
"isdst": false,
"text": "(UTC+04:00) Abu Dhabi, Muscat",
"timezone":"Asia/Muscat"
},
{
"value": "Azerbaijan Standard Time",
"abbr": "ADT",
"offset": 4,
"isdst": true,
"text": "(UTC+04:00) Baku",
"timezone":"Asia/Baku"
},
{
"value": "Russian Standard Time",
"abbr": "RST",
"offset": 4,
"isdst": false,
"text": "(UTC+04:00) Moscow, St. Petersburg, Volgograd",
"timezone":"Europe/Moscow"
},
{
"value": "Mauritius Standard Time",
"abbr": "MST",
"offset": 4,
"isdst": false,
"text": "(UTC+04:00) Port Louis",
"timezone":"Indian/Mauritius"
},
{
"value": "Georgian Standard Time",
"abbr": "GST",
"offset": 4,
"isdst": false,
"text": "(UTC+04:00) Tbilisi",
"timezone":"Asia/Tbilisi"
},
{
"value": "Caucasus Standard Time",
"abbr": "CST",
"offset": 4,
"isdst": false,
"text": "(UTC+04:00) Yerevan",
"timezone":"Asia/Yerevan"
},
{
"value": "Afghanistan Standard Time",
"abbr": "AST",
"offset": 4.5,
"isdst": false,
"text": "(UTC+04:30) Kabul",
"timezone":"Asia/Kabul"
},
{
"value": "West Asia Standard Time",
"abbr": "WAST",
"offset": 5,
"isdst": false,
"text": "(UTC+05:00) Ashgabat, Tashkent",
"timezone":"Asia/Tashkent"
},
{
"value": "Pakistan Standard Time",
"abbr": "PST",
"offset": 5,
"isdst": false,
"text": "(UTC+05:00) Islamabad, Karachi",
"timezone":"Asia/Karachi"
},
{
"value": "India Standard Time",
"abbr": "IST",
"offset": 5.5,
"isdst": false,
"text": "(UTC+05:30) Chennai, Kolkata, Mumbai, New Delhi",
"timezone":"Asia/Kolkata"
},
{
"value": "Sri Lanka Standard Time",
"abbr": "SLST",
"offset": 5.5,
"isdst": false,
"text": "(UTC+05:30) Sri Jayawardenepura",
"timezone":"Asia/Calcutta"
},
{
"value": "Nepal Standard Time",
"abbr": "NST",
"offset": 5.75,
"isdst": false,
"text": "(UTC+05:45) Kathmandu",
"timezone":"Asia/Katmandu"
},
{
"value": "Central Asia Standard Time",
"abbr": "CAST",
"offset": 6,
"isdst": false,
"text": "(UTC+06:00) Astana",
"timezone":"Asia/Dhaka"
},
{
"value": "Bangladesh Standard Time",
"abbr": "BST",
"offset": 6,
"isdst": false,
"text": "(UTC+06:00) Dhaka",
"timezone":"Asia/Dhaka"
},
{
"value": "Ekaterinburg Standard Time",
"abbr": "EST",
"offset": 6,
"isdst": false,
"text": "(UTC+06:00) Ekaterinburg",
"timezone":"Asia/Yekaterinburg"
},
{
"value": "Myanmar Standard Time",
"abbr": "MST",
"offset": 6.5,
"isdst": false,
"text": "(UTC+06:30) Yangon (Rangoon)",
"timezone":"Asia/Rangoon"
},
{
"value": "SE Asia Standard Time",
"abbr": "SAST",
"offset": 7,
"isdst": false,
"text": "(UTC+07:00) Bangkok, Hanoi, Jakarta",
"timezone":"Asia/Bangkok"
},
{
"value": "N. Central Asia Standard Time",
"abbr": "NCAST",
"offset": 7,
"isdst": false,
"text": "(UTC+07:00) Novosibirsk",
"timezone":"Asia/Novosibirsk"
},
{
"value": "China Standard Time",
"abbr": "CST",
"offset": 8,
"isdst": false,
"text": "(UTC+08:00) Beijing, Chongqing, Hong Kong, Urumqi",
"timezone":"Asia/Hong_Kong"
},
{
"value": "North Asia Standard Time",
"abbr": "NAST",
"offset": 8,
"isdst": false,
"text": "(UTC+08:00) Krasnoyarsk",
"timezone":"Asia/Krasnoyarsk"
},
{
"value": "Singapore Standard Time",
"abbr": "MPST",
"offset": 8,
"isdst": false,
"text": "(UTC+08:00) Kuala Lumpur, Singapore",
"timezone":"Asia/Kuala_Lumpur"
},
{
"value": "W. Australia Standard Time",
"abbr": "WAST",
"offset": 8,
"isdst": false,
"text": "(UTC+08:00) Perth",
"timezone":"Australia/Perth"
},
{
"value": "Taipei Standard Time",
"abbr": "TST",
"offset": 8,
"isdst": false,
"text": "(UTC+08:00) Taipei",
"timezone":"Asia/Taipei"
},
{
"value": "Ulaanbaatar Standard Time",
"abbr": "UST",
"offset": 8,
"isdst": false,
"text": "(UTC+08:00) Ulaanbaatar",
"timezone":"Asia/Ulaanbaatar"
},
{
"value": "North Asia East Standard Time",
"abbr": "NAEST",
"offset": 9,
"isdst": false,
"text": "(UTC+09:00) Irkutsk",
"timezone":"Asia/Irkutsk"
},
{
"value": "Tokyo Standard Time",
"abbr": "TST",
"offset": 9,
"isdst": false,
"text": "(UTC+09:00) Osaka, Sapporo, Tokyo",
"timezone":"Asia/Tokyo"
},
{
"value": "Korea Standard Time",
"abbr": "KST",
"offset": 9,
"isdst": false,
"text": "(UTC+09:00) Seoul",
"timezone":"Asia/Seoul"
},
{
"value": "Cen. Australia Standard Time",
"abbr": "CAST",
"offset": 9.5,
"isdst": false,
"text": "(UTC+09:30) Adelaide",
"timezone":"Australia/Adelaide"
},
{
"value": "AUS Central Standard Time",
"abbr": "ACST",
"offset": 9.5,
"isdst": false,
"text": "(UTC+09:30) Darwin",
"timezone":"Australia/Darwin"
},
{
"value": "E. Australia Standard Time",
"abbr": "EAST",
"offset": 10,
"isdst": false,
"text": "(UTC+10:00) Brisbane",
"timezone":"Australia/Brisbane"
},
{
"value": "AUS Eastern Standard Time",
"abbr": "AEST",
"offset": 10,
"isdst": false,
"text": "(UTC+10:00) Canberra, Melbourne, Sydney",
"timezone":"Australia/Melbourne"
},
{
"value": "West Pacific Standard Time",
"abbr": "WPST",
"offset": 10,
"isdst": false,
"text": "(UTC+10:00) Guam, Port Moresby",
"timezone":"Pacific/Port_Moresby"
},
{
"value": "Tasmania Standard Time",
"abbr": "TST",
"offset": 10,
"isdst": false,
"text": "(UTC+10:00) Hobart",
"timezone":"Australia/Hobart"
},
{
"value": "Yakutsk Standard Time",
"abbr": "YST",
"offset": 10,
"isdst": false,
"text": "(UTC+10:00) Yakutsk",
"timezone":"Asia/Yakutsk"
},
{
"value": "Central Pacific Standard Time",
"abbr": "CPST",
"offset": 11,
"isdst": false,
"text": "(UTC+11:00) Solomon Is., New Caledonia",
"timezone":"Pacific/Guadalcanal"
},
{
"value": "Vladivostok Standard Time",
"abbr": "VST",
"offset": 11,
"isdst": false,
"text": "(UTC+11:00) Vladivostok",
"timezone":"Asia/Vladivostok"
},
{
"value": "New Zealand Standard Time",
"abbr": "NZST",
"offset": 12,
"isdst": false,
"text": "(UTC+12:00) Auckland, Wellington",
"timezone":"Pacific/Auckland"
},
{
"value": "UTC+12",
"abbr": "U",
"offset": 12,
"isdst": false,
"text": "(UTC+12:00) Coordinated Universal Time+12",
"timezone":"Pacific/Kwajalein"
},
{
"value": "Fiji Standard Time",
"abbr": "FST",
"offset": 12,
"isdst": false,
"text": "(UTC+12:00) Fiji",
"timezone":"Pacific/Fiji"
},
{
"value": "Magadan Standard Time",
"abbr": "MST",
"offset": 12,
"isdst": false,
"text": "(UTC+12:00) Magadan",
"timezone":"Asia/Magadan"
},
{
"value": "Kamchatka Standard Time",
"abbr": "KDT",
"offset": 13,
"isdst": true,
"text": "(UTC+12:00) Petropavlovsk-Kamchatsky - Old",
"timezone":"Asia/Kamchatka"
},
{
"value": "Tonga Standard Time",
"abbr": "TST",
"offset": 13,
"isdst": false,
"text": "(UTC+13:00) Nuku'alofa",
"timezone":"Pacific/Tongatapu"
},
{
"value": "Samoa Standard Time",
"abbr": "SST",
"offset": 13,
"isdst": false,
"text": "(UTC+13:00) Samoa",
"timezone":"Pacific/Samoa"
}

do you have any tutorial step by step on how to set it up right ??