# Uibuilder - Insert dateTime stamp into navbar

**URL:** <https://discourse.nodered.org/t/uibuilder-insert-datetime-stamp-into-navbar/56990>\
**Category:** Dashboard\
**Tags:** uibuilder\
**Created:** [20 January 2022 23:08 UTC](https://discourse.nodered.org/t/uibuilder-insert-datetime-stamp-into-navbar/56990 "2022-01-20T23:08:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mick](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mick/32/80990_2.png) [@Mick](https://discourse.nodered.org/u/Mick)\
**Post date:** [20 January 2022 23:08 UTC](https://discourse.nodered.org/t/uibuilder-insert-datetime-stamp-into-navbar/56990/1 "2022-01-20T23:08:44Z")

</div>

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:

```auto
<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:

```auto
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:

```auto
   // 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:

```auto
        /** set timer interval for clock *//
        setInterval(this.getNow,1000);

```

Here is navbar code that I have for index.html:

```auto
</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..  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/b/1b8156f735db148cbb66e8e1e5ca80d6b145a1a5.png)

However in the navbar I see this...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/2/c2bb913b92a83b5692010537e9f0c048758e3cba.png)

Thanks in advance for your advise..  
Mick

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [20 January 2022 23:23 UTC](https://discourse.nodered.org/t/uibuilder-insert-datetime-stamp-into-navbar/56990/2 "2022-01-20T23:23:23Z")

</div>

You nav html doesnt seem to be inside the element called ` #app`  
so Vue doesnt know about it in order to update it dynamically.

thats why you get `{{timestamp}}` instead of the Vue data

move the nav code inside your wrapping `#app` div so its part of the Vue app

---

<div class="post-metadata">

**Author:** ![Mick](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mick/32/80990_2.png) [@Mick](https://discourse.nodered.org/u/Mick)\
**Post date:** [20 January 2022 23:56 UTC](https://discourse.nodered.org/t/uibuilder-insert-datetime-stamp-into-navbar/56990/3 "2022-01-20T23:56:30Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/3/330e9b0625a8a732876b76b8ed5210e46696bb73.png)

Spot on...

Thx.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [3 February 2022 23:57 UTC](https://discourse.nodered.org/t/uibuilder-insert-datetime-stamp-into-navbar/56990/4 "2022-02-03T23:57:06Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.