Buy me a coffee

Local Timezone

Support 

  • Free install + Free customize (basic, within 24 – 48 hours)
  • Send to my email: [email protected] with your details: site url, which position you want to add it + style (color, size..) I will do it for you.

To add Local Timezone to your site, you can follow these steps. 

Here I will guide you to insert it into Page Content, Footer and Header.

#1. First, you need to add this code to Code Injection > Footer 

Local Timezone01 Min

<script>
var d = new Date();
var n = d.getTimezoneOffset();
var t = d.getTime();
var offset = (n/60)*-1;

document.getElementById('date').innerText = d;
document.getElementById('offset').innerText = 'GMT'+offset;
</script>

#2. Next, to add Local Timezone to Page Content or Footer, you can edit Page or edit Footer > Add a Code Block  > Paste this code

Local Timezone2 Min

Local Date: <span id="date">Date Unavailable</span>
<br>
Local Offset: <span id="offset">Offset Unavailable</span>

Result

Local Timezone03 Min

#3. To add Local Timezone to Header

You can add a Code Block to Footer > Paste #2 code

Local Timezone2 Min

Next, enable an Announcement Bar (enter no text, see screenshot below)

Announcement Bar 02 Min

Next, add below code to Code Injection > Footer (under #1 code)

Local Timezone07 Min

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  setTimeout(function(){
    $('#date').closest('.code-block').addClass('local-timezone');
    $('.local-timezone').appendTo('#announcement-bar-text-inner-id');
},3000);
    
});
</script>
<style>
.local-timezone * {
    color: white;
}
#announcement-bar-text-inner-id p {
    display: none;
}
#announcement-bar-text-inner-id .code-block {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
span.sqs-announcement-bar-close {
    display: none;
}
</style>

Result

Local Timezone06 Min