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

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 onl oad=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.

CodePudding user response：

This should produce the format you want to have.

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

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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())