Date & Time in Dashboard 2 Tool bar

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. :grin:

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

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