timezone-picker

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

Live Demo: http://kevalbhatt.github.io/timezone-picker/

Dependency

• moment-timezone
• jquery
• select2 (optional)

Installation

Use package Using npm

npm install --save timezone-picker

or

Use package Using CDN

<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>

Usage

Select any dom element where you want to create the map.

$(selector).timezonePicker();

defaultValue

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" }});

quickLink

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"     }] });

hoverText

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

quickLinkClass

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>

selectClass

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>

filterBoxClass

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>

hoverTextClass

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>

Options

mapHoverType options

Methods

.setValue(value[String-required],attribute[String-optional])

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')

.getValue()

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",     } ]

.getSystemTimezone()

It returns an object containing system timezone details.

.getTimeZoneObject(value[String-required],attribute[String-optional])

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');

.getZoneName(value[String-required],attribute[String-optional])

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');

.getTimeZoneString(value[String-required],attribute[String-optional])

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');

Events

map:loaded

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!"); }); 

map:value:changed

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

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

map:country:clicked

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()); }); 

map:quickLink:clicked

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()); }); 

map:option:changed

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()); }); 

License

It is available under the MIT LICENSE