'Display and Formatting UTC Time On Static Website in Real-Time

My website currently displays UTC time like this:

2022-03-22T23:38:25.748Z

But I would like for it to be formatted like this:

23:39:22 UTC

Here is the javascript I have:

  <script type="text/javascript"> 
  function display_c(){
  var refresh=1000; // Refresh rate in milli seconds
  mytime=setTimeout('display_ct()',refresh)
  }
  
  function display_ct() {
  var x = new Date()
  var x1=x.toISOString();// changing the display to UTC string
  document.getElementById('ct').innerHTML = x1;
  tt=display_c();
   }

  <body onload=display_ct();><span id='ct' >

Can you help me format this? I've looked into using angular and searched other methods for implementing this but it seems that there are many ways to do this. The things I've tried do not display the format correctly. The code above is the closest solution I have found.

javascripthtml


Solution 1:[1]

new Date().toISOString().slice(11, 19) + ' UTC'

A nice and intentional property of the ISO datetime format is that most of the parts are always the same length.

Note that truncating, not rounding, is the correct behavior.

Solution 2:[2]

This should produce the format you want to have.

let date = new Date();
let utc_string = date.toUTCString().match(/..:..:.. .*/)[0];
console.log(utc_string);

Solution 3:[3]

Use the Intl.DateTimeFormat method for this as follows:

  function display_c(){
    const refresh = 1000; 
    mytime = setTimeout('display_ct()',refresh)
  }
  
  function display_ct() {
    let dtf = new Intl.DateTimeFormat("en-GB", { timeZone: "GMT", hour12: false, timeStyle: "long" });
    document.getElementById('ct').innerHTML = dtf.format( new Date() );
    tt = display_c();
   }

display_ct();
<div id="ct"></div>

Customization:

You can either use the various configuration options available to customize the format of the datetime, or use the following setup for displaying a custom String:

  function display_ct() {
    let dtf = new Intl.DateTimeFormat("en-GB", { timeZone: "GMT", hour12: false, timeStyle: "medium" });
    document.getElementById('ct').innerHTML = dtf.format( new Date() ) + " Zulu";
   }

Available configuration options: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat

Solution 4:[4]

I found a web to helping you. And i give an example to you too. https://www.codevscolor.com/javascript-iso-utc

const date = new Date('2022-03-22T23:38:25.748Z')

console.log(date.toString())
console.log(date.toUTCString())

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 twhb
Solution 2 thpbaxxter
Solution 3
Solution 4 Dimas Wahyu Notonagoro

Related Questions