Dashboard Layout Editor Time/date Stamp

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.

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
image

    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
image

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

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>

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

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

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