• State Not Answered
  • Locked Locked
  • Replies 48 replies
  • Subscribers 38 subscribers
  • Views 4352 views
  • Users 0 members are here
Options
Related
This discussion has been locked. The information referenced herein may be inaccurate due to age, software updates, or external references.
You can no longer post new replies to this discussion. If you have a similar question you can start a new discussion in this forum.

Time Zone Clocks using javascript

tkercher

Okay, less than overwhelming response on this (none).  I've updated the formatting for an improved look.  Simply copy and paste the code in the timeZones.txt file into a custom html resource.

Thwack has been an awesome resource that has provide many beneficial resources.  Hoping to give back a little to the community and that you may find this resource useful.

Building on an idea from 'branfarm' where he inserts time zone clocks using links to a free website called 'timeanddate.com', I wanted to replace the links to this website with pure javascript that leverages the server time.

After a bit of searching, I found the basis of what I was looking for here: javascript source code: world clock‌ and with minor modifications was able to come up with what I was looking for which was essentially below:

timeZoneClocks.png

Steps:

1.  From the 'miscellaneous' section, add a 'custom html' resource to your page.

2.  Copy and past the attached script and click submit.  It's that simple.

3.  If you would like to change the clocks included or the look of the clocks, you will have to edit the attached file.

Parents
  • 0

    I used to have this working on version 2019.4, but after upgrading to 2020.2.1, only the headers are showing. None of the time zones show a date/time stamp. Any ideas why?

    Same thing happens with this code:

    <script language="JavaScript">

    <!--

    function worldClock(zone, region){

    var dst = 0

    var time = new Date()

    var gmtMS = time.getTime() + (time.getTimezoneOffset() * 60000)

    var gmtTime = new Date(gmtMS)

    var day = gmtTime.getDate()

    var month = gmtTime.getMonth()

    var year = gmtTime.getYear()

    if(year < 1000){

    year += 1900

    }

    var monthArray = new Array("January", "February", "March", "April", "May", "June", "July", "August",

    "September", "October", "November", "December")

    var monthDays = new Array("31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31")

    if (year%4 == 0){

    monthDays = new Array("31", "29", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31")

    }

    if(year%100 == 0 && year%400 != 0){

    monthDays = new Array("31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31")

    }

    var zonehours = (zone - (((zone*10) % 10)/10));

    var zoneminutes = (zone - zonehours)*60;

    var hr = gmtTime.getHours() + zonehours;

    var min = gmtTime.getMinutes() + Number(zoneminutes.toPrecision(2));

    if (min <0) {

    hr--;

    min = (60 + min);

    }

    if (min >= 60) {

    hr++;

    min = (min -60);

    }

    var sec = gmtTime.getSeconds();

    if (hr >= 24){

    hr = hr-24

    day -= -1

    }

    if (hr < 0){

    hr -= -24

    day -= 1

    }

    if (hr < 10){

    hr = " " + hr

    }

    if (min < 10){

    min = "0" + min

    }

    if (sec < 10){

    sec = "0" + sec

    }

    if (day <= 0){

    if (month == 0){

    month = 11

    year -= 1

    }

    else{

    month = month -1

    }

    day = monthDays[month]

    }

    if(day > monthDays[month]){

    day = 1

    if(month == 11){

    month = 0

    year -= -1

    }

    else{

    month -= -1

    }

    }

    if (region == "NAmerica"){

    var startDST = new Date()

    var endDST = new Date()

    startDST.setMonth(3)

    startDST.setHours(2)

    startDST.setDate(1)

    var dayDST = startDST.getDay()

    if (dayDST != 0){

    startDST.setDate(8-dayDST)

    }

    else{

    startDST.setDate(1)

    }

    endDST.setMonth(9)

    endDST.setHours(1)

    endDST.setDate(31)

    dayDST = endDST.getDay()

    endDST.setDate(31-dayDST)

    var currentTime = new Date()

    currentTime.setMonth(month)

    currentTime.setYear(year)

    currentTime.setDate(day)

    currentTime.setHours(hr)

    if(currentTime >= startDST && currentTime < endDST){

    dst = 1

    }

    }

    if (region == "Europe"){

    var startDST = new Date()

    var endDST = new Date()

    startDST.setMonth(2)

    startDST.setHours(1)

    startDST.setDate(31)

    var dayDST = startDST.getDay()

    startDST.setDate(31-dayDST)

    endDST.setMonth(9)

    endDST.setHours(0)

    endDST.setDate(31)

    dayDST = endDST.getDay()

    endDST.setDate(31-dayDST)

    var currentTime = new Date()

    currentTime.setMonth(month)

    currentTime.setYear(year)

    currentTime.setDate(day)

    currentTime.setHours(hr)

    if(currentTime >= startDST && currentTime < endDST){

    dst = 1

    }

    }

    if (dst == 1){

    hr -= -1

    if (hr >= 24){

    hr = hr-24

    day -= -1

    }

    if (hr < 10){

    hr = " " + hr

    }

    if(day > monthDays[month]){

    day = 1

    if(month == 11){

    month = 0

    year -= -1

    }

    else{

    month -= -1

    }

    }

    return monthArray[month] + " " + day + ", " + year + "<br>" + hr + ":" + min + ":" + sec + " DST"

    }

    else{

    return monthArray[month] + " " + day + ", " + year + "<br>" + hr + ":" + min + ":" + sec

    }

    }

    function worldClockZone(){

    document.getElementById("Tulsa").innerHTML = worldClock(-6, "NAmerica")

    document.getElementById("New York").innerHTML = worldClock(-5, "NAmerica")

    document.getElementById("UTC").innerHTML = worldClock(0, "Greenwich")

    document.getElementById("London").innerHTML = worldClock(+1, "UK")

    document.getElementById("Bangalore").innerHTML = worldClock(+5.5, "India")

    document.getElementById("Tokyo").innerHTML = worldClock(+9, "Japan")

    setTimeout("worldClockZone()", 1000)

    }

    window.onload=worldClockZone;

    //-->

    </script>

    <style type="text/css">

    .hrow {

    vertical-align: middle;

    width: 100%;

    }

    .hrow td {

    padding: 5px;

    width: 140px;

    background-color: #555555;

    border: 2px solid #555555;

    border-collapse: collapse;

    font-family:arial;

    color: #ccc;

    text-align: center;

    font-weight: normal;

    }

    .hrow td:hover {

    background-color: #ff9626;

    color: #222222;

    border: 2px solid #ff8426;

    }

    .hrow td:hover h3 {

    color: #000000;

    }

    h3 {

    text-transform: uppercase;

    display: inline;

    color: #ccc;

    font-family: arial;

    }

    </style>

    <table>

    <tr class="hrow">

    <td><h3>Tulsa</h3></br><span id="Tulsa"></span></td>

    <td><h3>New York</h3></br><span id="New York"></span></td>

    <td><h3>Greenwich</h3></br><span id="Greenwich"></span></td>

    <td><h3>London</h3></br><span id="London"></span></td>

    <td><h3>Bangalore</h3></br><span id="Bangalore"></span></td>

    <td><h3>Tokyo</h3></br><span id="Tokyo"></span></td>

    </tr>

    </table>

Reply
  • 0

    I used to have this working on version 2019.4, but after upgrading to 2020.2.1, only the headers are showing. None of the time zones show a date/time stamp. Any ideas why?

    Same thing happens with this code:

    <script language="JavaScript">

    <!--

    function worldClock(zone, region){

    var dst = 0

    var time = new Date()

    var gmtMS = time.getTime() + (time.getTimezoneOffset() * 60000)

    var gmtTime = new Date(gmtMS)

    var day = gmtTime.getDate()

    var month = gmtTime.getMonth()

    var year = gmtTime.getYear()

    if(year < 1000){

    year += 1900

    }

    var monthArray = new Array("January", "February", "March", "April", "May", "June", "July", "August",

    "September", "October", "November", "December")

    var monthDays = new Array("31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31")

    if (year%4 == 0){

    monthDays = new Array("31", "29", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31")

    }

    if(year%100 == 0 && year%400 != 0){

    monthDays = new Array("31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31")

    }

    var zonehours = (zone - (((zone*10) % 10)/10));

    var zoneminutes = (zone - zonehours)*60;

    var hr = gmtTime.getHours() + zonehours;

    var min = gmtTime.getMinutes() + Number(zoneminutes.toPrecision(2));

    if (min <0) {

    hr--;

    min = (60 + min);

    }

    if (min >= 60) {

    hr++;

    min = (min -60);

    }

    var sec = gmtTime.getSeconds();

    if (hr >= 24){

    hr = hr-24

    day -= -1

    }

    if (hr < 0){

    hr -= -24

    day -= 1

    }

    if (hr < 10){

    hr = " " + hr

    }

    if (min < 10){

    min = "0" + min

    }

    if (sec < 10){

    sec = "0" + sec

    }

    if (day <= 0){

    if (month == 0){

    month = 11

    year -= 1

    }

    else{

    month = month -1

    }

    day = monthDays[month]

    }

    if(day > monthDays[month]){

    day = 1

    if(month == 11){

    month = 0

    year -= -1

    }

    else{

    month -= -1

    }

    }

    if (region == "NAmerica"){

    var startDST = new Date()

    var endDST = new Date()

    startDST.setMonth(3)

    startDST.setHours(2)

    startDST.setDate(1)

    var dayDST = startDST.getDay()

    if (dayDST != 0){

    startDST.setDate(8-dayDST)

    }

    else{

    startDST.setDate(1)

    }

    endDST.setMonth(9)

    endDST.setHours(1)

    endDST.setDate(31)

    dayDST = endDST.getDay()

    endDST.setDate(31-dayDST)

    var currentTime = new Date()

    currentTime.setMonth(month)

    currentTime.setYear(year)

    currentTime.setDate(day)

    currentTime.setHours(hr)

    if(currentTime >= startDST && currentTime < endDST){

    dst = 1

    }

    }

    if (region == "Europe"){

    var startDST = new Date()

    var endDST = new Date()

    startDST.setMonth(2)

    startDST.setHours(1)

    startDST.setDate(31)

    var dayDST = startDST.getDay()

    startDST.setDate(31-dayDST)

    endDST.setMonth(9)

    endDST.setHours(0)

    endDST.setDate(31)

    dayDST = endDST.getDay()

    endDST.setDate(31-dayDST)

    var currentTime = new Date()

    currentTime.setMonth(month)

    currentTime.setYear(year)

    currentTime.setDate(day)

    currentTime.setHours(hr)

    if(currentTime >= startDST && currentTime < endDST){

    dst = 1

    }

    }

    if (dst == 1){

    hr -= -1

    if (hr >= 24){

    hr = hr-24

    day -= -1

    }

    if (hr < 10){

    hr = " " + hr

    }

    if(day > monthDays[month]){

    day = 1

    if(month == 11){

    month = 0

    year -= -1

    }

    else{

    month -= -1

    }

    }

    return monthArray[month] + " " + day + ", " + year + "<br>" + hr + ":" + min + ":" + sec + " DST"

    }

    else{

    return monthArray[month] + " " + day + ", " + year + "<br>" + hr + ":" + min + ":" + sec

    }

    }

    function worldClockZone(){

    document.getElementById("Tulsa").innerHTML = worldClock(-6, "NAmerica")

    document.getElementById("New York").innerHTML = worldClock(-5, "NAmerica")

    document.getElementById("UTC").innerHTML = worldClock(0, "Greenwich")

    document.getElementById("London").innerHTML = worldClock(+1, "UK")

    document.getElementById("Bangalore").innerHTML = worldClock(+5.5, "India")

    document.getElementById("Tokyo").innerHTML = worldClock(+9, "Japan")

    setTimeout("worldClockZone()", 1000)

    }

    window.onload=worldClockZone;

    //-->

    </script>

    <style type="text/css">

    .hrow {

    vertical-align: middle;

    width: 100%;

    }

    .hrow td {

    padding: 5px;

    width: 140px;

    background-color: #555555;

    border: 2px solid #555555;

    border-collapse: collapse;

    font-family:arial;

    color: #ccc;

    text-align: center;

    font-weight: normal;

    }

    .hrow td:hover {

    background-color: #ff9626;

    color: #222222;

    border: 2px solid #ff8426;

    }

    .hrow td:hover h3 {

    color: #000000;

    }

    h3 {

    text-transform: uppercase;

    display: inline;

    color: #ccc;

    font-family: arial;

    }

    </style>

    <table>

    <tr class="hrow">

    <td><h3>Tulsa</h3></br><span id="Tulsa"></span></td>

    <td><h3>New York</h3></br><span id="New York"></span></td>

    <td><h3>Greenwich</h3></br><span id="Greenwich"></span></td>

    <td><h3>London</h3></br><span id="London"></span></td>

    <td><h3>Bangalore</h3></br><span id="Bangalore"></span></td>

    <td><h3>Tokyo</h3></br><span id="Tokyo"></span></td>

    </tr>

    </table>

Children
No Data

SolarWinds solutions are rooted in our deep connection to our user base in the THWACK® online community. More than 195,000 members are here to solve problems, share technology and best practices, and directly contribute to our product development process.

SolarWinds Customer Success Center Certification Media Vault Link Accounts
About THWACK Blogs For Government Edit Settings Free Tools & Trials
Legal Documents Terms of Use Privacy California Privacy Rights Security Information
©2024 SolarWinds Worldwide, LLC. All Rights Reserved.