jQuery Timezone Picker with World Map

The timezone-picker is a well developed and highly customizable plugin for jQuery to create timezone picker with a world map. This plugin renders a world map allowing the user to select a country to get timezone value. Besides the world map, it also allows users to search for a specific timezone from the dropdown list.

With the help of this plugin, you can create a fully customized timezone picker. It allows you to run custom callback functions on map load, country select, timezone select, and on dropdown select value.

Installation

Use package using NPM

npm install --save timezone-picker

Use package using CDN

<script src="https://cdn.jsdelivr.net/npm/timezone-picker@2.0.0-1/dist/timezone-picker.min.js"></script>

How to Create a Timezone Picker with World Map

1. The timezone-picker plugin requires the moment-timezone.js, jQuery, and select2 (optional). So, first of all, load the plugin dependencies into the head tag of your HTML document in order to get started with it.

<!-- Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Moment JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<!-- Moment Timezone JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.21/moment-timezone.min.js"></script>
<!-- Select2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>

2. After loading the plugin dependencies, also include the timezone-picker JavaScript and CSS file into your project.

<!-- Timezone Picker CSS -->
<link href="dist/styles/timezone-picker.css" rel="stylesheet">
<!-- Timezone Picker JS -->
<script type="text/javascript" src="dist/timezone-picker.min.js"></script>

3. Now, create a container (a div element) with a unique id in which you want to render jQuery timezone picker with a world map.

<div id="my-timezone"></div>

4. Finally, initialize the plugin in the jQuery document ready function to active the timezone picker.

        $('#my-timezone').timezonePicker({
            hoverText: function(e, data) {
                return (data.timezone + " (" + data.zonename + ")");
            },
            defaultValue: { value: "PK", attribute: "country" }
        });

Advanced Configuration Options

The following are the advanced configuration options to create a timezone picker.

$('#my-timezone').timezonePicker({
	width : 500,
});

$('#my-timezone').timezonePicker({
	height : 250,
});

$('#my-timezone').timezonePicker({
	defaultValue : { value: "EAT", attribute: "zonename" },
});

$('#my-timezone').timezonePicker({
	quickLinkClass : quick-link,
});

$('#my-timezone').timezonePicker({
	filterBoxClass : filter-box,
});

$('#my-timezone').timezonePicker({
	selectBox : true,
});

$('#my-timezone').timezonePicker({
	selectClass : country-lov,
});

$('#my-timezone').timezonePicker({
	showHoverText : true,
});

$('#my-timezone').timezonePicker({
	hoverTextClass : hover-text,
});

Callback Functions

The timezone-picker allows you to trigger custom callback functions on various events. The following are the events and callback function example to execute.

Run the custom function on the world map ready/loaded.

$(selector).on("map:loaded" , function(){
    console.log("Map is loaded, have fun!");
});

To execute the custom function when the map value changed.

$(selector).on("map:value:changed" , function(){
    console.log($(selector).data('timezonePicker').getValue());
});

When a country clicked.

$(selector).on("map:country:clicked" , function(){
    //do something
});

When timezone selects from dropdown list.

$(selector).on("map:option:changed" , function(){
    //do something
});

To run the custom callback function when map quick link selected.

$(selector).on("map:quickLink:clicked" , function(){
    //do something
});

That’s all! if you have any questions or need any further help, drop your comment below.