Nabbing Pleasant Monads

    timezone-picker

    2.0.0-1 • Public • Published

    timezone-picker

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

    NPM version NPM Dependency MIT Licence Open Source Love contributions welcome HitCount

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


    Imgur

    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/timezone-picker@2.0.0-1/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


    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";
    $(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

    Install

    npm i timezone-picker

    DownloadsWeekly Downloads

    64

    Version

    2.0.0-1

    License

    MIT

    Unpacked Size

    290 kB

    Total Files

    15

    Last publish

    Collaborators

    • kevalbhatt18