I figured out how to get the date time in UTC to render in the body section but putting it in the nav bar seems more tricky. I took this example from stack exchange and modified for index.js and index.html. Here is the example code:
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
</script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ timestamp }}</h1>
</div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
timestamp: ""
},
created() {
setInterval(this.getNow, 1000);
},
methods: {
getNow: function() {
const dateTime = new Date().toLocaleString('en-US', {timeZone: 'UTC', timeZoneName:'short',hourCycle: 'h23', hour: `2-digit`, minute: `2-digit`});
this.timestamp = dateTime;
}
}
});
</script>
</body>
</html>
Here are the index.js parts of my code.
data:
const app = new Vue({
el: '#app',
data() { return {
startMsg : 'Vue has started, waiting for messages',
feVersion : '',
counterBtn : 0,
inputText : null,
inputChkBox : false,
socketConnectedState : false,
serverTimeOffset : '[unknown]',
imgProps : { width: 75, height: 75 },
msgRecvd : '[Nothing]',
msgsReceived: 0,
msgTopic : '[Noting]',
msgsTopic : 0,
msgCtrl : '[Nothing]',
msgsControl : 0,
showme : false,
timestamp : "",
msgSent : '[Nothing]',
msgsSent : 0,
msgCtrlSent : '[Nothing]',
msgsCtrlSent: 0,
isLoggedOn : false,
userId : null,
userPw : null,
inputId : '',
}}, // --- End of data --- //
methods:
// get UTC dateTime function //
getNow: function() {
var dateTime = new Date().toLocaleString('en-US', {timeZone: 'UTC', timeZoneName:'short',hourCycle: 'h23', hour: `2-digit`, minute: `2-digit`});
this.timestamp = dateTime;
},
Created:
/** set timer interval for clock *//
setInterval(this.getNow,1000);
Here is navbar code that I have for index.html:
</head><body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand">{{timestamp}}</a>
In the body of the html the clock works fine..
However in the navbar I see this...
Thanks in advance for your advise..
Mick