Dashboard Layout Editor Time/date Stamp

[JasonH]

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

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

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

[jbudd]

There is no date/time in the dashboard header by default, but there is a published flow to display it there.

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

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

You need to change it to give the desired format options, eg for

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

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

[JasonH]

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.

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

[joepavitt]

Worth noting the initial post is for the original Dashboard, but your solution here refers to Dashboard 2.0's Teleport functionality

[thebaldgeek]

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