jQuery Timezone Picker with World Map

Category: Date & Time | April 27, 2020
jQuery Timezone Picker with World Map
Author: Keval Bhatt
Official Page: Go to Website
Last Update:April 28, 2020
License:MIT

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.

OptionDefaultTypeDescription
width500NumberThis option defines the width of map.

Example:

$('#my-timezone').timezonePicker({
	width : 500,
});
height250NumberIt defines the height of map.

Example:

$('#my-timezone').timezonePicker({
	height : 250,
});
defaultValueSystem timezoneStringSet the custom value on page load. { value: “EAT”, attribute: “zonename” }

Example:

$('#my-timezone').timezonePicker({
	defaultValue : { value: "EAT", attribute: "zonename" },
});
quickLinkClassquick-linkStringSet the class for quick link.

Example:

$('#my-timezone').timezonePicker({
	quickLinkClass : quick-link,
});
filterBoxClassfilter-boxStringThe class name where the filter box will be appended.

Example:

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

Example:

$('#my-timezone').timezonePicker({
	selectBox : true,
});
selectClasscountry-lovStringThe class name where the select box will be appended.

Example:

$('#my-timezone').timezonePicker({
	selectClass : country-lov,
});
showHoverTexttrueBooleanDecide whether to show text on hover or not.

Example:

$('#my-timezone').timezonePicker({
	showHoverText : true,
});
hoverTextClasshover-textStringThe class name for hover text.

Example:

$('#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.

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.