timezone-picker is the plugin to select and get timezone value of selected area(country) from WorldMap.

• moment-timezone
• jquery
• select2 (optional)

npm install --save timezone-picker

or

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/timezone-picker.min.js"></script>

Include the following lines of code in the section of your HTML.

<link href="[yourpath]/select2.min.css" rel="stylesheet"> <!-- Optional -->
<link href="[yourpath]/dist/styles/timezone-picker.css" rel="stylesheet">
<script type="text/javascript" src="[yourpath]/moment-timezone.js"></script> 
<script type="text/javascript" src="[yourpath]/jquery.js"></script>
<script type="text/javascript" src="[yourpath]/select2"></script> <!-- Optional -->
<script type="text/javascript" src="[yourpath]/dist/timezone-picker.min.js"></script>

$(selector).timezonePicker();

Set a custom value on load

If defaultValue is null then system timezone is selected

• Select value based on zonename.

$(selector).timezonePicker({ defaultValue: { value: "EAT", attribute: "zonename" }});

• Select value based on country code.

$(selector).timezonePicker({ defaultValue: { value: "IN", attribute: "country" }});

• Select value based on timezone.

$(selector).timezonePicker({ defaultValue: { value: "Asia/Calcutta", attribute: "timezone" }});

• Select value based on offset.

$(selector).timezonePicker({ defaultValue: { value: "5.5", attribute: "offset" }});

You can create custom shortcuts link using quickLink options.

$(selector).timezonePicker({
    quickLink: [{
        "IST": "IST",
        "LONDON": "Europe/London"
    }]
});

• "LONDON": This key is used as a display string for shortcut button.
• "Europe/London": This value is used when user click on a button and based on value, map is highlighted

Example:

You can pass following value.

• timezone : Europe/London
• zonename : GMT
• country code : GB

$(selector).timezonePicker({
    quickLink: [{
        "LONDON1": "Europe/London"
    }]
});

$(selector).timezonePicker({
    quickLink: [{
        "LONDON2": "GB"
    }]
});

$(selector).timezonePicker({
    quickLink: [{
        "LONDON3": "GMT"
    }]
});

$(selector).timezonePicker({
    quickLink: [{
        "GMT": "GMT"
    }]
});

$(selector).timezonePicker({
    hoverText: function(e, data){
        return (data.timezone + " (" + data.zonename + ")");
    }
});

Class name for the quickLink container.

$(selector).timezonePicker({
    quickLinkClass: "quick-class"
});

Output

<div class="filter-box">
    <select class="country-lov select-class"></select>
+    <div class="quick-link quick-class"></div>
    <div class="hover-text"></div>
</div>

Class name for the country drop-down.

$('body').timezonePicker({
    selectClass: "select-class"
});

Output

<div class="filter-box">
+    <select class="country-lov select-class"></select>
    <div class="quick-link"></div>
    <div class="hover-text"></div>
</div>

Class name for the filter box container.

$('body').timezonePicker({
    filterBoxClass: "filter-class"
});

Output

+<div class="filter-box filter-class">
    <select class="country-lov"></select>
    <div class="quick-link"></div>
    <div class="hover-text"></div>
</div>

Class name for the hover text container.

$('body').timezonePicker({
    hoverTextClass: "hover-class"
});

Output

<div class="filter-box">
    <select class="country-lov"></select>
    <div class="quick-link"></div>
+    <div class="hover-text hover-class"></div>
</div>

Select the value(country) based on value and attribute parameter.

• Set timezone string as a first parameter for example: 'Asia/Kolkata'.
• Default attribute is "timezone";

$(selector).data('timezonePicker').setValue('Asia/Kolkata')

• If you want to set value based on offset then set the 1st parameter as an offset string("5.5") and 2nd parameter to 'offset'

$(selector).data('timezonePicker').setValue('5.5','offset')

• If you want to set value based country code then set the 1st parameter as country code and 2nd parameter to 'country'

$(selector).data('timezonePicker').setValue('IN','country')

• If you want to set value based zonename then set the 1st parameter as zonename(IST) and 2nd parameter to 'zonename'

$(selector).data('timezonePicker').setValue('IST','zonename')

It returns object containing timezone details of seleted area:

$(selector).data('timezonePicker').getValue()

Sample returned Object

  [
    {
        "selected":true,
        "zonename":"IST",
        "offset":5.5,
        "pin":"361,115",
        "country":"LK",
        "timezone": "Asia/Colombo",
    },
    {
        "zonename":"IST",
        "offset":5.5,
        "pin": "373,94",
        "country":"IN",
        "timezone": "Asia/Kolkata",
    }
]

It returns an object containing system timezone details.

It returns an object containing timezone details based on value and attribute.

• Get timezone Object using timezone string example: 'Asia/Kolkata'.
• Default attribute is "timezone";

$(selector).data('timezonePicker').getTimeZoneObject('Asia/Kolkata');

• If you want to get Object based on offset then set the 1st parameter as an offset string("5.5") and 2nd parameter to 'offset'

$(selector).data('timezonePicker').getTimeZoneObject('5.5','offset');

• If you want to get Object based country code then set the 1st parameter as country code and 2nd parameter to 'country'

$(selector).data('timezonePicker').getTimeZoneObject('IN','country');

• If you want to get Object based zonename then set the 1st parameter as zonename(IST) and 2nd parameter to 'zonename'

$(selector).data('timezonePicker').getTimeZoneObject('IST','zonename');

It returns an zonename based on value and attribute.

• Get zonename String using timezone string example: 'Asia/Kolkata'.
• Default attribute is "timezone";

$(selector).data('timezonePicker').getZoneName('Asia/Kolkata');

• If you want to get zonename based on offset then set the 1st parameter as an offset string("5.5") and 2nd parameter to 'offset'

$(selector).data('timezonePicker').getZoneName('5.5','offset');

• If you want to get zonename based country code then set the 1st parameter as country code and 2nd parameter to 'country'

$(selector).data('timezonePicker').getZoneName('IN','country');

It returns an timezone string based on value and attribute.

• Get timezone String using country code example: 'IN'.
• Default attribute is "country";

$(selector).data('timezonePicker').getZoneName('IN');

• If you want to get timezone string based on offset then set the 1st parameter as an offset string("5.5") and 2nd parameter to 'offset'

$(selector).data('timezonePicker').getTimeZoneString('5.5','offset');

• If you want to get timezone string based zonename then set the 1st parameter as zonename(IST) and 2nd parameter to 'zonename'

$(selector).data('timezonePicker').getTimeZoneString('IST','zonename');

As soon as the map is loaded and ready the map:loaded is fired. To catch it you can use:

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

Whenever the value of the timezone changes, the event map:value:changed is fired. To catch it you can use:

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

Event map:country:clicked is fired, when a user clicks on the country. To catch it you can use:

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

Event map:quickLink:clicked is fired, when a user clicks on the quickLink button. To catch it you can use:

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

Event map:option:changed is fired, when a user changes the value from the country drop-down. To catch it you can use:

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

It is available under the MIT LICENSE