I have the following code in a Dashboard 2.0 template node...
<template>
<v-container>
<v-row justify="space-around">
<v-date-picker v-model="value"
show-adjacent-months
reactive = "true"
hide-header="true"
@update:model-value="send({payload: value})">
</v-date-picker>
</v-row>
</v-container>
<div>
<h2>Latest <code>msg</code> received:</h2>
<pre>{{ msg.payload }}</pre>
<pre>{{value}}</pre>
</div>
</template>
<script>
export default {
data () {
return {
// value: "2025-03-01T00:00:00.000Z"
// value: 1741824000
// value: new Date().toISOString()
// value: new Date().toISOString().substring(0, 10)
}
}
}
</script>
The rendering seems off compared to the examples and, the aspect ratio and spacing, specifically, and I cant work out why, or how to fix it.
In addition... and perhaps more importantly.
I am trying to update the current selected date by passing in a value/string with msg.payload, and despite so many different attempts with promising looking code snippets from other examples I cant do it.
I am aware of the 'this.' construct and context, and I even expect I should be using it but everything I have tried to add within the script tags just breaks the basic functionality of the control or entirely prevents it from rendering.
Uncommenting any of the lines in the function just stops the control from rendering at all.
The value variable and update event that sends it out both work just fine.
Interestingly, sending a value in, a date string or epoch time value, sets the date in the header and propagates out. This happens even if the script block is entirely omitted.
However it also removes the date table which cant be recovered without refreshing the page.
Even more odd, once a value has set, either by injecting or just selecting a date from the picker, refreshing the page or navigating away and back again loads that date but any attempt to move between months, without first selecting a date, hides the date table, as above.
Restarting Node-Red fixes this until a date is again selected.
Sending in, or applying with an event, a value that results in the 'Enter Date' date prompt doesn't fix the hidden date table issue!
What I need to do is set 'value' to 'msg.payload', when a message arrives.
I expect I will have exactly the same issues with the time picker so generalized answers would be cool.
All code based on examples and what of the documentation seems relevant in this, Node-Red template node, use case.
Pulling my hair out, any help / suggestions would be much appreciated.
Thanks
Al
