Responsive Timezone Picker With World Map - jQuery timezone-picker.js

File Size: 147 KB
Views Total: 9651
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive Timezone Picker With World Map - jQuery timezone-picker.js

A fully responsive, user-friendly timezone picker plugin that allows the user to easily and quickly select a timezone by clicking the countries and regions in an SVG based World Map. Based on jQuery and Moment.js libraries.

How to use it:

1. Load the needed jQuery and Moment.js libraries in the document.

<script src="" 
<script src=""></script>
<script src="">

2. Load the JavaScript file timezone-picker.js after jQuery library.

<script src="timezone-picker.js"></script>

3. Create a container to place the timezone picker.

<div id="map"></div>

4. Initialize the timezone picker and done.


5. Add more timezone quick links to the timezone picker.

  quickLink: [{
      "PST": "PST",
      "MST": "MST",
      "CST": "CST",
      "EST": "EST",
      "GMT": "GMT",
      "LONDON": "Europe/London",
      "IST": "IST"

6. Config the timezone picker by overriding the following settings:

  width: 500,
  height: 250,
  hoverColor: '#5A5A5A',
  selectedColor: '#496A84',
  mapColor: '#BBB',
  mapHover: null,
  defaultCss: true,
  localStore: true,
  selectBox: true,
  showHoverText: true,
  hoverText: null,
  dayLightSaving: ((typeof moment == "function") ? (true) : (false))



  • Fix offset of America/Bahia


  • v2.0.0-0


  • Added webpack, scss and es6 support


About Author:

Author: kevalbhatt


This awesome jQuery plugin is developed by kevalbhatt. For more Advanced Usages, please check the demo page or visit the official website.