Responsive Timezone Picker for Selected Country With World Map

by Posted on

Responsive Timezone Picker for Selected Country With World Map
If your website operated by globally and some of your website module dependent on timezone then in this post I am going to share a plugin which help your user to pic timezone for selected country with world map. It is a fully responsive, user-friendly timezone picker plugin(timezone-picker.js) that allows the user to easily creates a Map using SVG. A user can select a country from worldmap and it returns timezone value of selected country.
Imgur


Integrate Timezone Picker on your website

Follow below steps to add timezone picker with world map on your web project.

Libraries

First include latest jquery core library with Moment.js lib + Timezone Picker minified library timezone-picker.min.js

 <script src="//code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js"></script>
    <script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.4.1/moment-timezone-with-data-2010-2020.min.js"></script>
    <script type="text/javascript" src="timezone-picker.min.js"></script>

HTML

Create a map container to diplay timezone picker with world map.

  <div id="map" style="width:80%"></div>

JS

Create basic timezone picker with following function.

$(function() {   
  $('#map').timezonePicker();
});




You can also apply custom setting on timezonePicker by following properties.

$(function() {   
  $('#map').timezonePicker({
  quickLink: [{
      "PST": "PST",
      "MST": "MST",
      "CST": "CST",
      "EST": "EST",
      "GMT": "GMT",
      "INDIA": "Asia/Kolkata",
      "IST": "IST"
  }],
  width: 800,
  height: 400,
  hoverColor: '#666666',
  selectedColor: '#333333',
  mapColor: '#BBB',
  mapHover: null,
  defaultCss: true,
  localStore: true,
  selectBox: true,
  showHoverText: true,
  hoverText: null,
  dayLightSaving: ((typeof moment == "function") ? (true) : (false))
 });
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.



Published by admin