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