timezone-picker
timezone-picker is the plugin to select and get timezone value of selected area(country) from WorldMap.
http://kevalbhatt.github.io/timezone-picker/
Live Demo:Dependency
- moment-timezone
- jquery
- select2 (optional)
Installation
Use package Using npm
npm install --save timezone-picker
or
Use package Using CDN
Include the following lines of code in the section of your HTML.
<!-- Optional --> <!-- Optional -->
Usage
Select any dom element where you want to create the map.
;
defaultValue
Set a custom value on load
If defaultValue is null then system timezone is selected
- ### Select value based on zonename.
;
- ### Select value based on country code.
;
- ### Select value based on timezone.
;
- ### Select value based on offset.
;
quickLink
You can create custom shortcuts link using quickLink options.
;
- "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
; ; ; ;
hoverText
;
quickLinkClass
Class name for the quickLink container.
;
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.
;
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.
;
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.
;
Output
<div class="filter-box"> <select class="country-lov"></select> <div class="quick-link"></div>+ <div class="hover-text hover-class"></div></div>
Options
Parameter | Type | Default | Description |
---|---|---|---|
width | Number |
500 |
width of map |
height | Number |
250 |
height of map |
defaultValue | Object |
System timezone | Set custome value on load { value: "EAT", attribute: "zonename" } |
quickLink | Array<Object> |
[{"IST": "IST","LONDON": "Europe/London"}] |
Creates shortcuts to select zone |
quickLinkClass | String |
quick-link |
quickLinkClass will be appended with the default value |
filterBoxClass | String |
filter-box |
filterBoxClass will be appended with the default value |
selectBox | Boolean |
true |
If it is set to false select box will not be created |
selectClass | String |
country-lov |
selectClass is appended with the default value |
showHoverText | Boolean |
true |
If it is set to false hover text will not be shown |
hoverText | Function |
timezone(zonename) |
Called on hover of country (works only if showHoverText is true) |
hoverTextClass | String |
hover-text |
hoverTextClass is appended with the default value |
hoverTextEl | Jquery selector |
Appened in filter-box |
hover text element is appended in selector |
mapHoverType | String |
hover polygon(area) | by default it will show hovered polygon(area) on which mouse is pointed other hover options |
mapHoverType options
Parameter | Type | Description |
---|---|---|
timezone | String |
when you hover on the map it will highlight all country with the same timezone |
country | String |
when you hover on the map it will highlight all country with same country code |
zonename | String |
when you hover on the map it will highlight all country with the same zone name |
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";
data'timezonePicker'
- 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'
data'timezonePicker'
- If you want to set value based country code then set the 1st parameter as country code and 2nd parameter to 'country'
data'timezonePicker'
- If you want to set value based zonename then set the 1st parameter as zonename(IST) and 2nd parameter to 'zonename'
data'timezonePicker'
.getValue()
It returns object containing timezone details of seleted area:
data'timezonePicker'
Sample returned Object
"selected":true "zonename":"IST" "offset":55 "pin":"361,115" "country":"LK" "timezone": "Asia/Colombo" "zonename":"IST" "offset":55 "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";
data'timezonePicker';
- 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'
data'timezonePicker';
- If you want to get Object based country code then set the 1st parameter as country code and 2nd parameter to 'country'
data'timezonePicker';
- If you want to get Object based zonename then set the 1st parameter as zonename(IST) and 2nd parameter to 'zonename'
data'timezonePicker';
.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";
data'timezonePicker';
- 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'
data'timezonePicker';
- If you want to get zonename based country code then set the 1st parameter as country code and 2nd parameter to 'country'
data'timezonePicker';
.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";
data'timezonePicker';
- 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'
data'timezonePicker';
- If you want to get timezone string based zonename then set the 1st parameter as zonename(IST) and 2nd parameter to 'zonename'
data'timezonePicker';
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