# Date & Time in Dashboard 2 Tool bar

**URL:** <https://discourse.nodered.org/t/date-time-in-dashboard-2-tool-bar/85602>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [16 February 2024 19:52 UTC](https://discourse.nodered.org/t/date-time-in-dashboard-2-tool-bar/85602 "2024-02-16T19:52:44Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [16 February 2024 19:52 UTC](https://discourse.nodered.org/t/date-time-in-dashboard-2-tool-bar/85602/1 "2024-02-16T19:52:44Z")

</div>

There have been several Date Time clocks for Dashboard 1, so having seen an example of how to show stuff in Dashboard 2 toolbar I thought I would try a clock for Dashboard 2.

This goes in a D2 Template node as Widget ui\_scoped.

There is no visual formatting, I leave that to the user. 😁

```auto
<template>
    <Teleport v-if="mounted" to="#app-bar-actions">
            <p>{{ displayDateTime }}</p>

    </Teleport>

</template>

<script>

    export default {
        data() {
            return {
                mounted: false,
                currentTime: new Date(),
                timer: undefined,

            }

        },

        methods: {
            setDateTime: function() {
                this.currentTime = new Date()

            }

        },

        computed: {
            displayDateTime: function() {
                return `${this.currentTime.toLocaleDateString()}, ${this.currentTime.toLocaleTimeString()}`

            }

        },
 
        mounted() {
            this.mounted = true,
            this.timer = setInterval(this.setDateTime, 1000)
        },

        unmounted() {
            clearInterval(this.timer)

        },

    }

</script>

```

---

<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:** [17 March 2024 19:53 UTC](https://discourse.nodered.org/t/date-time-in-dashboard-2-tool-bar/85602/2 "2024-03-17T19:53:36Z")

</div>

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