JavaScript – Get Local Timezone of Client

The post shows you how to get local timezone of a client, who is visiting your website.

To do this, we get the timeZone value that is returned by Intl.DateTimeFormat.prototype.resolvedOptions() method. But this approach does not work in IE browser. In order to solve this problem, we need to use a 3rd party timezone library, such as JSTZ, Moment.js, etc. In this post, we show you how to combine Intl with JSTZ library.

 

1. Implementation

Let’s create a js file and add the following function.

local-timezone.js
function getClientLocalTimezone() {
    var localTimezone = null;
    
    if (typeof Intl !== 'undefined') {
        // use Intl approach
        localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    }
    
    if (!localTimezone) {
        // use jstz approach in IE browser
        localTimezone = jstz.determine().name();
    }

    return localTimezone;
}

 

2. Example

Create an example.html file and include JSTZ library and add our getClientLocalTimezone() function. Click on the “Run Example” to see how it works.

example.htmlRun Example
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript – Get Local Timezone of Client | ByteNota</title>
</head>
<body>
    <h3>Your Local Timezone:</h3>
    <p id="result"></p>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.4/jstz.min.js"></script>

    <script type="text/javascript">
    
        function getClientLocalTimezone() {
            var localTimezone = null;
            
            if (typeof Intl !== 'undefined') {
                // use Intl approach
                localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
            }
            
            if (!localTimezone) {
                // use jstz approach in IE browser
                localTimezone = jstz.determine().name();
            }

            return localTimezone;
        }


        var localTimezone = getClientLocalTimezone();
        document.getElementById('result').innerHTML = localTimezone;

    </script>

</body>
</html>

You'll probably like...

Leave a Reply

avatar