Bollate

HTML

[ANSWERED] Javascript HTML Multiple Timezone Clock

By

Nov 19, 2022 , , , ,

Solution 1 :

To be precise: Welcome to 2020 😉

for info :
— list of TZ -> https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

— Date.toLocaleString usage -> https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/toLocaleString

[edit] added military time (without seconds and : separator)

first version with civil and military times

const OptionsCivil    = { hour12:true,  hour:'numeric', minute:'2-digit', second:'2-digit' };  
const OptionsMilitary = { hour12:false, hour:'2-digit', minute:'2-digit' };

const CivilTime=(dt,dz)=>dt.toLocaleString("en-GB", {...OptionsCivil, timeZone:dz })

const MilitaryTime=(dt,dz)=>
  {
  let rep = dt.toLocaleString("en-US", {...OptionsMilitary, timeZone:dz }).replace(/:/g,'')
  return (rep==='0000') ? 2400 : rep.replace(/^24/, '00'); // specific browsers marmelade
  }

setInterval(() => {
  let d = new Date();
  document.querySelectorAll('.timZon')
            .forEach(el=> el.textContent = CivilTime(d, el.dataset.timeZone));
  document.querySelectorAll('.timZonM')
            .forEach(el=> el.textContent = MilitaryTime(d, el.dataset.timeZone));
}, 1000);

/* or more concise :
setInterval(() => {
  let d = new Date();
  document.querySelectorAll('.timZon, .timZonM')
           .forEach(el=>el.textContent =(el.classList.contains('timZonM')?MilitaryTime:CivilTime)(d, el.dataset.timeZone));
}, 1000);
*/
div.timZon,
div.timZonM {
  width       : 7em;
  text-align  : right;
  margin      : .4em;
  color       : deeppink;
  font-family : 'Courier New', Courier, monospace;
}
div.timZonM { /* military time */
  width  : 3em;
  color  : navy;
}

/* css tooltip code for displaying timeZone value
   ----------------> irrelevant part, can be removed) */
div[data-time-zone] {
  cursor    : crosshair;
  position  : relative;
  }
div[data-time-zone]:hover {
  background-color : yellow;
  }
div[data-time-zone]:hover:before {
  position         : absolute;
  font-size        : .8em;
  top              : 1.7em;
  border-radius    : .8em;
  content          : 'TZ: ' attr(data-time-zone);
  background-color : darkblue;
  color            : whitesmoke;
  white-space      : nowrap;
  z-index          : 1000;
  padding          : .4em .6em;
  }
<div class="timZon"  data-time-zone="America/New_York" ></div>
<div class="timZonM" data-time-zone="America/New_York" ></div>
<div class="timZonM" data-time-zone="Asia/Kolkata"></div>
<div class="timZonM" data-time-zone="Europe/Paris"></div>
<div class="timZonM" data-time-zone="Australia/Adelaide"></div>
<div class="timZonM" data-time-zone="Etc/GMT"></div>
<div class="timZonM" data-time-zone="Etc/GMT+4"></div>
<div class="timZonM" data-time-zone="Etc/GMT-5"></div>

After the last comments here is a version only with military times, the first on the list to be the only one to indicate the seconds

const OptionsMilitary = { hour12:false, hour:'2-digit', minute:'2-digit', second:'2-digit' };

const MilitaryTime=(elm, dt)=>
  {
  let [hh,mm,ss] = dt.toLocaleString("en-US", {...OptionsMilitary, timeZone:elm.dataset.timeZone }).split(':') 
  if ('seconds'in elm.dataset) elm.dataset.seconds = ':'+ss
  elm.textContent = (hh=='00'&&mm=='00') ? '2400' : (hh+mm).replace(/^24/, '00'); // specific browsers marmelade
  }

setInterval(() => {
  let dateTime = new Date();
  document.querySelectorAll('.timZonM').forEach(el=>MilitaryTime(el, dateTime));
}, 1000);
div.timZonM { /* military time */
  width          : 3em;
  margin         : .3em;
  color          : navy;
  font-size      : 20px;
  font-family    : 'Courier New', Courier, monospace;
  letter-spacing : .05em;
  }
div.timZonM::after {
  content : attr(data-seconds);
  color   : crimson;
  }

/* css tooltip code for displaying timeZone value
   ----------------> irrelevant part, can be removed) */
div[data-time-zone] {
  cursor    : crosshair;
  position  : relative;
  }
div[data-time-zone]:hover {
  background-color : yellow;
  }
div[data-time-zone]:hover:before {
  position         : absolute;
  font-size        : .8em;
  top              : 1.7em;
  border-radius    : .8em;
  content          : 'TZ: ' attr(data-time-zone);
  background-color : darkblue;
  color            : whitesmoke;
  white-space      : nowrap;
  z-index          : 1000;
  padding          : .4em .6em;
  }
<div class="timZonM" data-time-zone="America/New_York"></div>
<div class="timZonM" data-time-zone="Asia/Kolkata"></div>
<div class="timZonM" data-time-zone="Europe/Paris" data-seconds></div> <!-- add data-seconds to show seconds value -->
<!-- as much as you want... -->
<div class="timZonM" data-time-zone="Australia/Adelaide"></div>
<div class="timZonM" data-time-zone="Asia/Kathmandu"></div>
<div class="timZonM" data-time-zone="Etc/GMT"></div>
<div class="timZonM" data-time-zone="Etc/GMT+4" data-seconds></div>
<div class="timZonM" data-time-zone="Etc/GMT-5"></div>

for horizontaly display use css flex box

const OptionsMilitary = { hour12:false, hour:'2-digit', minute:'2-digit', second:'2-digit' }
  ,   timZonMil_All   = document.querySelectorAll('div.timZonMil > div')
  ;
const MilitaryTime=(elm, dt)=>
  {
  let [hh,mm,ss] = dt.toLocaleString("en-US", {...OptionsMilitary, timeZone:elm.dataset.timeZone }).split(':')
  elm.textContent = (hh=='00'&&mm=='00') ? '2400' : (hh+mm).replace(/^24/, '00'); // specific browsers marmelade
  if ('seconds' in elm.dataset) elm.innerHTML  += `<span>:${ss}</span>` 
  }
setInterval(() => {
  let dateTime = new Date();
  timZonMil_All.forEach(el=>MilitaryTime(el, dateTime));
}, 500);
div.timZonMil {
  display         : flex;
  justify-content : space-between;
  min-width       : 100vw;
  position        : absolute;
  top             : 123px;
  color           : navy;
  font-size       : 20px;
  font-family     : 'Courier New', Courier, monospace;
  letter-spacing  : .05em;
  }
div.timZonMil > div {
  min-width   : 3.6em;
  text-align  : center;
  }
div.timZonMil > div[data-seconds] {
  min-width   : 5.2em;
  }
div.timZonMil > div > span {
  color       : crimson;
  }

/* css tooltip code for displaying timeZone value
   ----------------> irrelevant part, can be removed) */
div[data-time-zone] {
  cursor    : crosshair;
  position  : relative;
  }
div[data-time-zone]:hover {
  background-color : yellow;
  }
div[data-time-zone]:hover:before {
  position         : absolute;
  font-size        : .8em;
  top              : 1.7em;
  border-radius    : .8em;
  content          : 'TZ: ' attr(data-time-zone);
  background-color : darkblue;
  color            : whitesmoke;
  white-space      : nowrap;
  z-index          : 1000;
  padding          : .4em .6em;
  }
<div class="timZonMil" >
  <div data-time-zone="Asia/Tehran"></div>
  <div data-time-zone="Etc/GMT"    ></div>
  <div data-time-zone="Etc/GMT+4"  data-seconds ></div>
  <div data-time-zone="Etc/GMT-8"  ></div>
  <div data-time-zone="Etc/GMT-14" ></div>
</div>

I also changed second display method, regarding ypur last message

Solution 2 :

Welcome to 2020 😉

For HHMM military time you can use 

const pad = (num) => ("0" + num).slice(-2);
....
const [hh,mm,ss] = d.split(", ")[1].split(":");
document.querySelector("#" + t).innerHTML = pad(hh)+pad(mm)

const timeObj = {
  "txt1": {
    "tz": "America/New_York",
    "locale": "en-US"
  },
  "txt2": {
    "tz": "Asia/Kolkata",
    "locale": "en-IN"
  },
  "txt3": {
    "tz": "Europe/Berlin",
    "locale": "de-DE"
  }
};

const timeClock = () => {
  for (t in timeObj) {
    const tObj = timeObj[t];
    let d = new Date().toLocaleString(
      tObj.locale, { "timeZone": tObj.tz })
    document.querySelector("#" + t).innerHTML = d.split(", ")[1];
  }
};
setInterval(timeClock, 500);
div {
  width: 100px;
  text-align: right
}
<div id="txt1"></div>
<div id="txt2"></div>
<div id="txt3"></div>

Problem :

How would I bring together my checkTime and checkMinute function into one so that when I do an offset of (m + 30) it will also make h go to the next hour when m reaches 60. Thanks!

Currently My code tells the time and can take on offset for hours on a 24 hour scale, my issue is it does not allow me to change the code in offset of + 30 minutes which I would like the ability to do.

My if statements aren’t getting me the outcome I want which is when minutes hit 60 from doing an offset of + 30 then the hour will go to the next one instead of only affecting the minutes.

I believe I would need to bring the two function together but am not sure how to do this accurately.

function addLeadingZero(n) {
  return n < 10 ? '0' + n : n;
}

function timeClock(timeZoneOffset) {
  var d = new Date();
  d.setHours(d.getUTCHours() + timeZoneOffset); // set time zone offset
  var h = d.getUTCHours();
  var m = d.getUTCMinutes();
  var s = d.getUTCSeconds();
  /*    h = h % 12;
      h = h ? h : 12; // replace '0' w/ '12'  */
  /*  h = checkHour(h)  */
  m = checkTime(m);
  s = checkTime(s);
  h = addLeadingZero(h);

  document.all["txt3"].innerHTML = /*+ checkHour*/ (h - 4) + ':' + m + ':' + s + ' ';
  document.all["txt1"].innerHTML = /*+ checkHour*/ (h + 3) + ':' + m + '' + ' ';
  document.all["txt2"].innerHTML = h + ':' + checkMinute(m + 30) + '' + ' ';
  document.all["txt4"].innerHTML = h + ':' + m + '' + ' ';
  document.all["txt5"].innerHTML = h + ':' + m + '' + ' ';
  setTimeout(function() {
    timeClock(timeZoneOffset)
  }, 500);
}

function checkTime(i) {
  var j = i;
  if (i < 10) {
    j = "0" + i;
  }
  return j;
}

function checkHour(i) {
  var j = i;
  if (i > 23) {
    j = j - 24;
  }
  if (i < 0) {
    j = "0" + i;
  }
  return j;
}

function checkMinute(i) {
  var j = i;
  if (i > 59) {
    j = j - 60;
  }
  if (i < 0) {
    j = "0" + i;
  }
  return j;
}

/* setInterval(function() {
      startTime();
      }, 500);
    })(jQuery);    */

window.onload = function() {
  timeClock(2);
}
<div id="txt3"></div>
<div id="txt1"></div>
<div id="txt2"></div>
<div id="txt4"></div>
<div id="txt5"></div>

Comments

Comment posted by mplungjan

document.all is a remnant for IE from before the millenium… Your code can easily updated to 2020

Comment posted by mplungjan

ALso why use checkTime, when you have addLeadingZero and you are not using checkHour

Comment posted by Johnlovescode

@mplungjan How would I update document.all? Im not to familiar with any other methods. And I removed checkTime. I did not notice it repeated addLeadingZero

Comment posted by Johnlovescode

@mplungjan is there away I can make one function do what addLeadingZero, and checkHour does in one

Comment posted by mplungjan

My answer does not even need the

Comment posted by Johnlovescode

Awesome! Thank you ! Also if I would like to edit the timezone further would I do so in HTML by just changing the data-time-zone=”” to the timezone I want?

Comment posted by Mister Jojo

@Johnlovescode Yes, you can put the time zone label of your choice in as many divs as you want, I added in my post the reference to have the list of all possible TZs.

Comment posted by mplungjan

What is the need for

Comment posted by Mister Jojo

@Johnlovescode this is because FireFox display

Comment posted by Johnlovescode

@MisterJojo Thank you I decided to use your answer. Only question how would I get rid of am in civil time as I do not want it displayed

Comment posted by Johnlovescode

@mplugjan Thanks! this shortened my code a lot! Only problem is I need the time in military time and im not sure how to change your edits to get that output

Comment posted by mplungjan

Change from en-US

Comment posted by mplungjan

@Johnlovescode I changed from en_US to en_GB and you get 24 hour time

Comment posted by Johnlovescode

@mplugjan Perfect. Thanks! Ill give it a try.

Comment posted by mplungjan

@Johnlovescode Do you mean HHMM when you say military time? If so see simple update

By

Related Post

HTML

[ANSWERED] html – Hidden Div Text Reappears?

Nov 20, 2022
HTML

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

Nov 20, 2022
HTML

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022