Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
org.webjars.bowergithub.kevalbhatt:timezone-picker
Advanced tools
timezone-picker is the plugin to select and get timezone value of selected area(country) from WorldMap.
npm install --save timezone-picker
or
<script src="https://cdn.jsdelivr.net/npm/timezone-picker@2.0.0-0/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
$(selector).timezonePicker({ defaultValue: { value: "EAT", attribute: "zonename" }});
$(selector).timezonePicker({ defaultValue: { value: "IN", attribute: "country" }});
$(selector).timezonePicker({ defaultValue: { value: "Asia/Calcutta", attribute: "timezone" }});
$(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"
}]
});
Example:
You can pass following value.
$(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>
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 |
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 |
Select the value(country) based on value and attribute parameter.
$(selector).data('timezonePicker').setValue('Asia/Kolkata')
$(selector).data('timezonePicker').setValue('5.5','offset')
$(selector).data('timezonePicker').setValue('IN','country')
$(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.
Object
using timezone string example: 'Asia/Kolkata'.$(selector).data('timezonePicker').getTimeZoneObject('Asia/Kolkata');
$(selector).data('timezonePicker').getTimeZoneObject('5.5','offset');
$(selector).data('timezonePicker').getTimeZoneObject('IN','country');
$(selector).data('timezonePicker').getTimeZoneObject('IST','zonename');
It returns an zonename based on value and attribute.
String
using timezone string example: 'Asia/Kolkata'.$(selector).data('timezonePicker').getZoneName('Asia/Kolkata');
$(selector).data('timezonePicker').getZoneName('5.5','offset');
$(selector).data('timezonePicker').getZoneName('IN','country');
It returns an timezone string based on value and attribute.
String
using country code example: 'IN'.$(selector).data('timezonePicker').getZoneName('IN');
$(selector).data('timezonePicker').getTimeZoneString('5.5','offset');
$(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:clicked" , 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
FAQs
WebJar for timezone-picker
We found that org.webjars.bowergithub.kevalbhatt:timezone-picker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.