Digital World Clock

Keith Mills · ‎02-06-2013

I have had many clients complain about the quality of the World clocks on the homepages based on each browser type, and when one client requested that we try to provide a Digital clock version, I set out to build one. Here is what I have come up with, and seems to work fairly well so far.

This design on the World Clock contains two scripts.

UI Script - CoolClock_rjm (This is a new UI Script)
UI Page - example_cool_clock (This is the default page, just modified to include new code, suggest you make backups).

To Add / Change / Remove clocks on the Widget, you will need to modify the HTML Table in the UI Page, and then you will need to modify the UI Script to match the new clocks that you have added. This is done at the end of the UI Script in the function called worldClockZone

Things I am still Working on:

DST Time shifts do not automatically get changed, you will need to edit each Region yearly to identify when the DST shift occurs. This will require editing the following in each region section of the UI Script:

startDST.setMonth(#); //Month DST Starts
startDST.setHours(#); //Hour DST Starts
startDST.setDate(#); //Day DST Starts

endDST.setMonth(#); //Month DST Ends
endDST.setHours(#); //Hour DST Ends
endDST.setDate(#); //Day DST Ends

Ideally, I would like to setup some form of variable that maintains the next 20 years for this information, or keep it dynamic, but just don't have the time right now to figure this out.

The other thing I have not fully tested is all of the regions that are default in the script, as my client needed only Europe and North America.

If anyone is willing to improve on this, by all means have at it.

Jim Coyne · ‎02-06-2013

Cool indeed

ravi154 · ‎02-08-2013

not sure if this is what u r looking for but u can try
World Clock with DST Implemented

Daryll Conway · ‎08-11-2014

If you're looking at implementing DST I've worked on doing this before. Here is a snippet of the code I used to achieve this...

// dateTime is the date we start with...

// Split up Date and Time for manipulation and reordering

var dateSplit = dateTime.split(" ")[0];

var timeSplit = dateTime.split(" ")[1];

// Split the Date

var date = dateSplit.split("-")[0];

var month = dateSplit.split("-")[1];

var year = dateSplit.split("-")[2];

// Split the Time

var hours = parseInt(timeSplit.split(":")[0]);

var minutes = parseInt(timeSplit.split(":")[1]);

// Add extra digit to the front of single digit times after we've parsed them to integers

var textMinutes = String(minutes);

if (textMinutes.length < 2)

textMinutes = '0' + textMinutes;

// Variable to add extra 0 to single integer month values for display as : MM

var monthExtraDigit = false;

// Change month format to integer

if(month == "Jan"){

month=1;

monthExtraDigit = true;

}

if(month == "Feb"){

month=2;

monthExtraDigit = true;

}

if(month == "Mar"){

month=3;

monthExtraDigit = true;

}

if(month == "Apr"){

month=4;

monthExtraDigit = true;

}

if(month == "May"){

month=5;

monthExtraDigit = true;

}

if(month == "Jun"){

month=6;

monthExtraDigit = true;

}

if(month == "Jul"){

month=7;

monthExtraDigit = true;

}

if(month == "Aug"){

month=8;

monthExtraDigit = true;

}

if(month == "Sep"){

month=9;

monthExtraDigit = true;

}

if(month == "Oct"){

month = 10;

}

if(month == "Nov"){

month = 11;

}

if(month == "Dec"){

month = 12;

}

// IF daylight savings

if(month >= 3 && month <= 10){

if(month == 3 && date <30){

return;

}

if(month == 10 && date >26){

return;

}

else{

hours--;

dayLightSavings = true;

}

// Add extra digit to the front of single digit months

if(monthExtraDigit)

month = '0' + String(month);

// Reorder & combine the forms Date & Time and add Day Light Savings if necessary

if (dayLightSavings == true) {

dateTime = (date + "-" + month + "-" + year + " " + (hours + 1) + ":" + textMinutes);

}

else {

dateTime = (date + "-" + month + "-" + year + " " + hours + ":" + textMinutes);

}

Hope this helps

meghansmith · ‎09-29-2015

I needed to include Chennai, which is +5h, 30m. This is what I came up with to work with locations off by 30 minute increments:

/*The code for this clock was originally copied from the following prologic.com, and modified to work in ServiceNow by Keith Mills from Nashco Solutions. It was updated to account for zones with a half-hour difference by Meghan Smith of CDM Smith

To Add / Change / Remove clocks, edit the Function worldClockZone section at the end of this script. Be sure to update the UI Page as well*/

function worldClock(zoneh, zonem, 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(year0 == 0 && year%400 != 0){

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

}

var hr = gmtTime.getHours() + zoneh;

var min = gmtTime.getMinutes() + zonem;

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 (region == "SAmerica"){

var startDST = new Date();

var endDST = new Date();

startDST.setMonth(9);

startDST.setHours(0);

startDST.setDate(1);

var dayDST = startDST.getDay();

if (dayDST != 0){

startDST.setDate(22-dayDST);

}

else{

startDST.setDate(15);

}

endDST.setMonth(1);

endDST.setHours(11);

endDST.setDate(1);

dayDST = endDST.getDay();

if (dayDST != 0){

endDST.setDate(21-dayDST);

}

else{

endDST.setDate(14);

}

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 == "Cairo"){

var startDST = new Date();

var endDST = new Date();

startDST.setMonth(3);

startDST.setHours(0);

startDST.setDate(30);

var dayDST = startDST.getDay();

if (dayDST < 5){

startDST.setDate(28-dayDST);

}

else {

startDST.setDate(35-dayDST);

}

endDST.setMonth(8);

endDST.setHours(11);

endDST.setDate(30);

dayDST = endDST.getDay();

if (dayDST < 4){

endDST.setDate(27-dayDST);

}

else{

endDST.setDate(34-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 == "Israel"){

var startDST = new Date();

var endDST = new Date();

startDST.setMonth(3);

startDST.setHours(2);

startDST.setDate(1);

endDST.setMonth(8);

endDST.setHours(2);

endDST.setDate(25);

dayDST = endDST.getDay();

if (dayDST != 0){

endDST.setDate(32-dayDST);

}

else{

endDST.setDate(1);

endDST.setMonth(9);

}

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 == "Beirut"){

var startDST = new Date();

var endDST = new Date();

startDST.setMonth(2);

startDST.setHours(0);

startDST.setDate(31);

var dayDST = startDST.getDay();

startDST.setDate(31-dayDST);

endDST.setMonth(9);

endDST.setHours(11);

endDST.setDate(31);

dayDST = endDST.getDay();

endDST.setDate(30-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 == "Baghdad"){

var startDST = new Date();

var endDST = new Date();

startDST.setMonth(3);

startDST.setHours(3);

startDST.setDate(1);

endDST.setMonth(9);

endDST.setHours(3);

endDST.setDate(1);

dayDST = endDST.getDay();

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 == "Australia"){

var startDST = new Date();

var endDST = new Date();

startDST.setMonth(9);

startDST.setHours(2);

startDST.setDate(31);

var dayDST = startDST.getDay();

startDST.setDate(31-dayDST);

endDST.setMonth(2);

endDST.setHours(2);

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("_chennai").innerHTML = worldClock(+5, 30);

document.getElementById("_est").innerHTML = worldClock(-5, 0, "NAmerica");

}

addLoadEvent(function(){ setInterval(function(){worldClockZone();}, 1000);});