# Dashboard Layout Editor Time/date Stamp

**URL:** <https://discourse.nodered.org/t/dashboard-layout-editor-time-date-stamp/87593>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [29 April 2024 18:13 UTC](https://discourse.nodered.org/t/dashboard-layout-editor-time-date-stamp/87593 "2024-04-29T18:13:29Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![JasonH](https://avatars.discourse-cdn.com/v4/letter/j/e0b2c6/32.png) [@JasonH](https://discourse.nodered.org/u/JasonH)\
**Post date:** [29 April 2024 18:13 UTC](https://discourse.nodered.org/t/dashboard-layout-editor-time-date-stamp/87593/1 "2024-04-29T18:13:29Z")

</div>

Is there away to format the date time stamp in the Node-Red Layout editor, blue area at the top of the picture?

 ![Video Source Control](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/6/a62b596534697ff3cb711caef5e4d44e7a08f798.jpeg)

I have the following settings; however, you can see it is not displaying the data correctly or maybe it cannot be edited?

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/4/04c329cb8c538d4062f2777565f690e26cc5a3fd.jpeg)

I want to reduce the amount of information contained in the header so it doesn't break the text into two lines there.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [29 April 2024 19:07 UTC](https://discourse.nodered.org/t/dashboard-layout-editor-time-date-stamp/87593/2 "2024-04-29T19:07:01Z")

</div>

There is no date/time in the dashboard header by default, but there is a [published flow](https://flows.nodered.org/flow/7e4bb517ce3a75add0083642ef03e9d8) to display it there.

It consists of a dashboard template node named "Clock Toolbar" including this code

```auto
    function upTime() {
        var d = new Date();
        p.text(d.toLocaleString());
    }

```

You need to change it to give the desired format options, eg for  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/b/8bcdcaab05e90dd478d2e7685a696a73b590a3dc.png)

```auto
    function upTime() {
        var d = new Date();
        var options = { weekday: 'short', hour: 'numeric' }
        p.text(d.toLocaleDateString("en-US", options))
    }

```

I acknowledge the assistance of the forum search, duckduckgo "javascript format date time" and [https://stackoverflow.com/questions/3552461/how-do-i-format-a-date-in-javascript](https://stackoverflow.com/questions/3552461/how-do-i-format-a-date-in-javascript) in creating this reply.

I am not sure of the significance of "en\_US" in the above code. The hour shown in my image above is British Summertime, which matches both my Node-red server and the PC I'm viewing the dashboard from.

Edit - "AM/PM" and 12 hour clock are part of the en\_US locale. If I change it to en\_GB I get  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/e/8e815ab5774caf3dde28184b0bc794a5db496916.png)

And I should warn you that the Pi on which I experimented with this has become unresponsive!

---

<div class="post-metadata">

**Author:** ![JasonH](https://avatars.discourse-cdn.com/v4/letter/j/e0b2c6/32.png) [@JasonH](https://discourse.nodered.org/u/JasonH)\
**Post date:** [30 April 2024 18:12 UTC](https://discourse.nodered.org/t/dashboard-layout-editor-time-date-stamp/87593/3 "2024-04-30T18:12:46Z")

</div>

Thanks for the information...It allowed me to find the code a previous employee had created and hidden, which is below: It is a little more elaborate that what you sent, but your code allowed me to find the appropriate place and edit this code and it works great now.

```auto
<script id="titleScript" type="text/javascript">

$(function() {
    if($('.md-toolbar-tools').length != 0){
        loadClock();
    }else setTimeout(loadClock, 500)
});

function loadClock(){
    $('#clock').remove();
    var toolbar = $('.md-toolbar-tools');
    
    var div = $('<div/>');
    var p = $('<p/ id="clock">');
    
    div.append(p);
    div[0].style.margin = '5px 5px 5px auto';
    toolbar.append(div);

    function displayTitle(lh) {
        p.text(lh); 
    }
    
    function upTime() {
        var d = new Date();
        p.text(d.toLocaleString());
        var options = { month: 'numeric', day: 'numeric', year: '2-digit', hour: 'numeric', minute: 'numeric' }
        p.text(d.toLocaleDateString("en-US", options))
    }

    if(document.clockInterval){ 
            clearInterval(document.clockInterval);
            document.clockInterval = null;
    }
        
    document.clockInterval = setInterval(upTime,1000);
}

</script>

```

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [3 May 2024 16:07 UTC](https://discourse.nodered.org/t/dashboard-layout-editor-time-date-stamp/87593/5 "2024-05-03T16:07:40Z")

</div>

Worth noting the initial post is for the original Dashboard, but your solution here refers to [Dashboard 2.0's Teleport functionality](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#teleports)

---

<div class="post-metadata">

**Author:** ![thebaldgeek](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thebaldgeek/32/93523_2.png) [@thebaldgeek](https://discourse.nodered.org/u/thebaldgeek)\
**Post date:** [3 May 2024 16:09 UTC](https://discourse.nodered.org/t/dashboard-layout-editor-time-date-stamp/87593/6 "2024-05-03T16:09:36Z")

</div>

Missed that.  
Deleted the post to save confusion.  
Sorry for the noise.

---

<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:** [2 June 2024 16:09 UTC](https://discourse.nodered.org/t/dashboard-layout-editor-time-date-stamp/87593/7 "2024-06-02T16:09:46Z")

</div>

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