# Time display

**URL:** <https://forum.readymag.com/t/time-display/443>\
**Category:** Custom code\
**Created:** [July 14, 2022, 4:13am UTC](https://forum.readymag.com/t/time-display/443 "2022-07-14T04:13:40Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cyrill\_Durigon](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/cyrill_durigon/32/342_2.png) [@Cyrill\_Durigon](https://forum.readymag.com/u/Cyrill_Durigon)\
**Post date:** [July 14, 2022, 4:13am UTC](https://forum.readymag.com/t/time-display/443/1 "2022-07-14T04:13:40Z")

</div>

Hello all!

I would like to display user local time like this " “hh : mm : ss” on my contact page.  
I saw many possibilities for how to do that, but I am not sure how I could implement it on Readymag.

Has anybody ever done it?

best,

---

<div class="post-metadata">

**Author:** ![HEADLESS.HORSE](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/headless.horse/32/144_2.png) [@HEADLESS.HORSE](https://forum.readymag.com/u/HEADLESS.HORSE)\
**Post date:** [July 20, 2022, 12:41pm UTC](https://forum.readymag.com/t/time-display/443/2 "2022-07-20T12:41:42Z")

</div>

Hello @Cyrill_Durigon there are a couple of options to do this. I have linked to a Codepen that has some easy to understand JS. I have linked it here as inline HTML for embedding.

https://codepen.io/afarrar/embed/preview/JRaEjP?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=JRaEjP

```auto

<div id="MyClockDisplay" class="clock" onload="showTime()"></div>

<style>
    body {
    background: black;
}

.clock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #17D4FE;
    font-size: 60px;
    font-family: Orbitron;
    letter-spacing: 7px;
}
</style>

<script>
    function showTime(){
    var date = new Date();
    var h = date.getHours(); // 0 - 23
    var m = date.getMinutes(); // 0 - 59
    var s = date.getSeconds(); // 0 - 59
    var session = "AM";
    
    if(h == 0){
        h = 12;
    }
    
    if(h > 12){
        h = h - 12;
        session = "PM";
    }
    
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;
    
    var time = h + ":" + m + ":" + s + " " + session;
    document.getElementById("MyClockDisplay").innerText = time;
    document.getElementById("MyClockDisplay").textContent = time;
    
    setTimeout(showTime, 1000);
    
}

showTime();
</script>

```

---

<div class="post-metadata">

**Author:** ![HEADLESS.HORSE](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/headless.horse/32/144_2.png) [@HEADLESS.HORSE](https://forum.readymag.com/u/HEADLESS.HORSE)\
**Post date:** [July 20, 2022, 12:42pm UTC](https://forum.readymag.com/t/time-display/443/3 "2022-07-20T12:42:18Z")

</div>

@fmc I saw you were also looking for a solution to this. 🙂

---

<div class="post-metadata">

**Author:** ![Cyrill\_Durigon](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/cyrill_durigon/32/342_2.png) [@Cyrill\_Durigon](https://forum.readymag.com/u/Cyrill_Durigon)\
**Post date:** [July 26, 2022, 11:26pm UTC](https://forum.readymag.com/t/time-display/443/4 "2022-07-26T23:26:54Z")

</div>

Thank you !

It works, I even found a way to display only a specific time zone 😉

Check it out :

> **[‘PORTFOLIO CYRILL DURIGON — HOME’ from ‘PORTFOLIO VE’ by Cyrill Durigon](https://cyrill.cc/info/)**
>
> Cyrill Durigon portfolio

---

<div class="post-metadata">

**Author:** ![HEADLESS.HORSE](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/headless.horse/32/144_2.png) [@HEADLESS.HORSE](https://forum.readymag.com/u/HEADLESS.HORSE)\
**Post date:** [July 27, 2022, 11:11am UTC](https://forum.readymag.com/t/time-display/443/5 "2022-07-27T11:11:58Z")

</div>

Nice! Codepen is a great resource for anyone looking to add some extra coded elements to their site but don’t know where to begin.

---

<div class="post-metadata">

**Author:** ![mr.wren](https://avatars.discourse-cdn.com/v4/letter/m/b782af/32.png) [@mr.wren](https://forum.readymag.com/u/mr.wren)\
**Post date:** [August 24, 2022, 10:31pm UTC](https://forum.readymag.com/t/time-display/443/6 "2022-08-24T22:31:09Z")

</div>

Thanks guys this is great, just used it. Any idea on the code to display the date as well?

---

<div class="post-metadata">

**Author:** ![HEADLESS.HORSE](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/headless.horse/32/144_2.png) [@HEADLESS.HORSE](https://forum.readymag.com/u/HEADLESS.HORSE)\
**Post date:** [August 30, 2022, 3:36pm UTC](https://forum.readymag.com/t/time-display/443/7 "2022-08-30T15:36:13Z")

</div>

Hi @mr.wren Not for this particular Codepen I linked. I would suggest using this one that uses MomentJS just as it’s much better with handling dates and timezones! I’ve attached a link here and some quick code to get you started.

[https://momentjs.com](https://momentjs.com)

```auto
<div id="clock"></div>
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/moment.js"></script>

<script>
function update() {
  $('#clock').html(moment().format('D. MMMM YYYY H:mm:ss'));
}
  
setInterval(update, 1000);
</script>

```

---

<div class="post-metadata">

**Author:** ![mr.wren](https://avatars.discourse-cdn.com/v4/letter/m/b782af/32.png) [@mr.wren](https://forum.readymag.com/u/mr.wren)\
**Post date:** [September 19, 2022, 1:09am UTC](https://forum.readymag.com/t/time-display/443/8 "2022-09-19T01:09:01Z")

</div>

Ace! Thanks very much

---

<div class="post-metadata">

**Author:** ![mr.wren](https://avatars.discourse-cdn.com/v4/letter/m/b782af/32.png) [@mr.wren](https://forum.readymag.com/u/mr.wren)\
**Post date:** [November 9, 2022, 3:27am UTC](https://forum.readymag.com/t/time-display/443/9 "2022-11-09T03:27:03Z")

</div>

Hey, so I launched the site but there seems to be a bug with the clock in that you have to refresh the page in order for it to become visible. Any ideas? Thanks, much appreciated, I’m lost ; )

> **[Comfort Magazine](https://comfortmagazine.world)**
>
> A magazine & foundation for a world we are building

---

<div class="post-metadata">

**Author:** ![mr.wren](https://avatars.discourse-cdn.com/v4/letter/m/b782af/32.png) [@mr.wren](https://forum.readymag.com/u/mr.wren)\
**Post date:** [November 9, 2022, 3:27am UTC](https://forum.readymag.com/t/time-display/443/10 "2022-11-09T03:27:49Z")

</div>

Here is the code…

 body { background: none; } .clock { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: black; font-size: 9px; font-family: space mono; letter-spacing: 0px; }

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [November 9, 2022, 8:15am UTC](https://forum.readymag.com/t/time-display/443/11 "2022-11-09T08:15:42Z")

</div>

here in my side its working without refresh.

---

<div class="post-metadata">

**Author:** ![sol](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/sol/32/1357_2.png) [@sol](https://forum.readymag.com/u/sol)\
**Post date:** [November 17, 2023, 3:23pm UTC](https://forum.readymag.com/t/time-display/443/12 "2023-11-17T15:23:34Z")

</div>

Hi! How did you manage to display only a specific time zone?