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

 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;
content          : 'TZ: ' attr(data-time-zone);
background-color : darkblue;
color            : whitesmoke;
white-space      : nowrap;
z-index          : 1000;
}``````
``````<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="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;
content          : 'TZ: ' attr(data-time-zone);
background-color : darkblue;
color            : whitesmoke;
white-space      : nowrap;
z-index          : 1000;
}``````
``````<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="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;
content          : 'TZ: ' attr(data-time-zone);
background-color : darkblue;
color            : whitesmoke;
white-space      : nowrap;
z-index          : 1000;
}``````
``````<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(":");
``````
``````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);

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);    */

timeClock(2);
}``````
``````<div id="txt3"></div>
<div id="txt1"></div>
<div id="txt2"></div>
<div id="txt4"></div>
<div id="txt5"></div>``````

### 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