Select your timezone using world map
npm install timezone-pickertimezone-picker is the plugin to select and get timezone value of selected area(country) from WorldMap.
![Open Source Love]()
``sh`
npm install --save timezone-picker
or
`html`
Include the following lines of code in the section of your HTML.
`html`
`js`
$(selector).timezonePicker();
Set a custom value on load
If defaultValue is null then system timezone is selected
* ### Select value based on zonename.
`js`
$(selector).timezonePicker({ defaultValue: { value: "EAT", attribute: "zonename" }});
* ### Select value based on country code.
`js`
$(selector).timezonePicker({ defaultValue: { value: "IN", attribute: "country" }});
* ### Select value based on timezone.
`js`
$(selector).timezonePicker({ defaultValue: { value: "Asia/Calcutta", attribute: "timezone" }});
* ### Select value based on offset.
`js`
$(selector).timezonePicker({ defaultValue: { value: "5.5", attribute: "offset" }});
You can create custom shortcuts link using quickLink options.
`js`
$(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
`js
$(selector).timezonePicker({
quickLink: [{
"LONDON1": "Europe/London"
}]
});
$(selector).timezonePicker({
quickLink: [{
"LONDON2": "GB"
}]
});
$(selector).timezonePicker({
quickLink: [{
"LONDON3": "GMT"
}]
});
$(selector).timezonePicker({
quickLink: [{
"GMT": "GMT"
}]
});
`
`js`
$(selector).timezonePicker({
hoverText: function(e, data){
return (data.timezone + " (" + data.zonename + ")");
}
});
Class name for the quickLink container.
`js`
$(selector).timezonePicker({
quickLinkClass: "quick-class"
});
Output
`diff`
+
selectClass
Class name for the country drop-down.
`js`
$('body').timezonePicker({
selectClass: "select-class"
});
Output
`diff`
+
Class name for the filter box container.
`js`
$('body').timezonePicker({
filterBoxClass: "filter-class"
});
Output
`diff`
+
Class name for the hover text container.
`js`
$('body').timezonePicker({
hoverTextClass: "hover-class"
});
Output
`diff`
+
| Parameter | Type | Default | Description |
| :---------|:---- |:--------|:----------- |
| width | Number | 500 | width of map |Number
| height | | 250 | height of map |Object
| defaultValue | | System timezone | Set custome value on load { value: "EAT", attribute: "zonename" } |Array
| quickLink |
| 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
---------------------$3
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";
`js
$(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'
js
$(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'
js
$(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'
js
$(selector).data('timezonePicker').setValue('IST','zonename')
`$3
It returns object containing timezone details of seleted area:
js
$(selector).data('timezonePicker').getValue()
`Sample returned Object
js
[
{
"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",
}
]
` $3
It returns an object containing system timezone details.
$3
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";`js
$(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'
js
$(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'
js
$(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'
js
$(selector).data('timezonePicker').getTimeZoneObject('IST','zonename');
`$3
It returns an zonename based on value and attribute.
* Get zonename
using timezone string example: 'Asia/Kolkata'.
* Default attribute is "timezone";`js
$(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'
js
$(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'
js
$(selector).data('timezonePicker').getZoneName('IN','country');
`
$3
It returns an timezone string based on value and attribute.
* Get timezone
using country code example: 'IN'.
* Default attribute is "country";`js
$(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'
js
$(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'
js
$(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());
});