I then changed @click to @change, so it is waiting now till i select a date, but it is still always current datetime. not the selected date. (also if i click already selected date, does not send anything (because no change ?))
Using the @change event, the value is in $event.target.value
Okay, getting closer:
[
{
"id": "ffb7638b150e4b2e",
"type": "tab",
"label": "Flow 1",
"disabled": false,
"info": "",
"env": []
},
{
"id": "692677b5bded5eac",
"type": "flexdash custom",
"z": "ffb7638b150e4b2e",
"fd_container": "03a0504bf2e6c6a8",
"fd_cols": 1,
"fd_rows": 1,
"fd_array": false,
"fd_array_max": 10,
"fd_output_topic": "",
"fd_loopback": false,
"name": "CustomWidget",
"title": "",
"sfc_source": "<template>\n <div class=\"pushbutton d-flex align-center justify-center\">\n <input type=\"date\" \n value=\"2022-12-01\"\n min=\"2022-04-01\" max=\"2025-12-31\" @change=\"dateSelected($event)\">\n </div>\n</template>\n\n<style scoped>\n .label { color: red; }\n</style>\n\n<script>\nexport default {\n // Props are the inputs to the widget.\n // They can be set dynamically using Node-RED messages using `msg.<prop>`.\n // In a \"custom widget\" like this one they cannot be set via the Node-RED flow editor:\n // use the default values in the lines below instead.\n props: {\n label: { default: \"clickme\" }, // text to show inside button\n output: { default: \"I was clicked\" }, // value to output when clicked\n },\n\n emits: ['send'], // declare to Vue that this component emits a 'send' event\n\n // simple methods within the component\n methods: {\n dateSelected(ev) { // handle the clicking of the button, i.e., the handler for the '@click'\n console.log(ev)\n this.$emit('send', ev.target.value) // emit an event (Vue concept), a 'send' event goes to NR\n },\n },\n}\n</script>\n",
"import_map": {},
"x": 420,
"y": 200,
"wires": [
[
"758afba6687629d4"
]
]
},
{
"id": "758afba6687629d4",
"type": "debug",
"z": "ffb7638b150e4b2e",
"name": "debug 1",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 600,
"y": 200,
"wires": []
},
{
"id": "03a0504bf2e6c6a8",
"type": "flexdash container",
"name": "",
"kind": "StdGrid",
"fd_children": ",692677b5bded5eac",
"title": "",
"tab": "08f51d736525a592",
"min_cols": "1",
"max_cols": "20",
"unicast": "ignore",
"parent": "",
"solid": false,
"cols": "1",
"rows": "1"
},
{
"id": "08f51d736525a592",
"type": "flexdash tab",
"name": "",
"icon": "mdi-view-dashboard",
"title": "",
"fd_children": ",03a0504bf2e6c6a8",
"fd": "8c6540ab2d9a3573"
}
]
Bingo !
[{"id":"1d4c8a83206b5397","type":"inject","z":"bbf5094bc59a03b8","name":"CLEAR","props":[{"p":"label","v":"","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":390,"y":1140,"wires":[["a33bbbc19e3045c3"]]},{"id":"2d22a68715826c8f","type":"debug","z":"bbf5094bc59a03b8","name":"debug 97","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":520,"y":1240,"wires":[]},{"id":"a33bbbc19e3045c3","type":"fd-label","z":"bbf5094bc59a03b8","fd_container":"a96ede31d15e8fcc","fd_cols":3,"fd_rows":1,"fd_array":false,"fd_array_max":10,"name":"","title":"Selected Date","popup_info":"","label":null,"color":"","align":"center","justify":"center","weight":"400","size":"100%","padding":"4px","x":710,"y":1140,"wires":[]},{"id":"2fb3869daefce3b3","type":"change","z":"bbf5094bc59a03b8","name":"","rules":[{"t":"set","p":"label","pt":"msg","to":"payload._vts","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":530,"y":1200,"wires":[[]]},{"id":"5062746343444fa8","type":"flexdash custom","z":"bbf5094bc59a03b8","fd_container":"a96ede31d15e8fcc","fd_cols":"2","fd_rows":"1","fd_array":false,"fd_array_max":10,"fd_output_topic":"","fd_loopback":false,"name":"Date Picker","title":"","sfc_source":"<template>\n <div class=\"pushbutton d-flex align-center justify-center\">\n <input type=\"date\" \n value=\"2022-12-01\"\n min=\"2022-04-01\" max=\"2025-12-31\" @change=\"changed($event.target.value)\">\n </div>\n</template>\n\n\n<style scoped>\n .label { color: red; }\n</style>\n\n<script>\nexport default {\n // Props are the inputs to the widget.\n // They can be set dynamically using Node-RED messages using `msg.<prop>`.\n // In a \"custom widget\" like this one they cannot be set via the Node-RED flow editor:\n // use the default values in the lines below instead.\n props: {\n label: { default: \"clickme\" }, // text to show inside button\n output: { default: \"I was clicked\" }, // value to output when clicked\n },\n\n emits: ['send'], // declare to Vue that this component emits a 'send' event\n\n // simple methods within the component\n \n methods: {\n changed(ev) {\n console.log(\"Date picker event:\", ev)\n this.$emit('send', ev)\n },\n },\n \n}\n</script>\n","import_map":{},"x":350,"y":1200,"wires":[["2fb3869daefce3b3","2d22a68715826c8f","dce8f86f5c81764c"]]},{"id":"dce8f86f5c81764c","type":"moment","z":"bbf5094bc59a03b8","name":"","topic":"","input":"payload","inputType":"msg","inTz":"Asia/Calcutta","adjAmount":0,"adjType":"days","adjDir":"add","format":"DD-MMM-YYYY HH:mm:ss","locale":"en-US","output":"label","outputType":"msg","outTz":"Asia/Calcutta","x":590,"y":1320,"wires":[["a33bbbc19e3045c3"]]},{"id":"8e087e5cf921bba2","type":"flexdash custom","z":"bbf5094bc59a03b8","fd_container":"a96ede31d15e8fcc","fd_cols":"2","fd_rows":1,"fd_array":false,"fd_array_max":10,"fd_output_topic":"","fd_loopback":false,"name":"Clear","title":"","sfc_source":"<template>\n <v-btn variant=\"elevated\" class=\"ma-auto\" @click=\"clicked()\">\n <span class=\"label\">{{ label }}</span>\n </v-btn>\n</template>\n\n<style scoped>\n .label { color: red; }\n</style>\n\n<script>\nexport default {\n // Props are the inputs to the widget.\n // They can be set dynamically using Node-RED messages using `msg.<prop>`.\n // In a \"custom widget\" like this one they cannot be set via the Node-RED flow editor:\n // use the default values in the lines below instead.\n props: {\n label: { default: \"Clear\" }, // text to show inside button\n output: { default: \"I was clicked\" }, // value to output when clicked\n },\n\n emits: ['send'], // declare to Vue that this component emits a 'send' event\n\n // simple methods within the component\n methods: {\n clicked() { // handle the clicking of the button, i.e., the handler for the '@click'\n this.$emit('send', this.output) // emit an event (Vue concept), a 'send' event goes to NR\n },\n },\n}\n</script>\n","import_map":{},"x":460,"y":1400,"wires":[["6fad132103d1ccf0"]]},{"id":"6fad132103d1ccf0","type":"change","z":"bbf5094bc59a03b8","name":"","rules":[{"t":"set","p":"label","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":610,"y":1400,"wires":[["a33bbbc19e3045c3"]]},{"id":"a96ede31d15e8fcc","type":"flexdash container","name":"NFDC","kind":"StdGrid","fd_children":",7d8110bad209c9b4,e7c4f917522b9e07,a33bbbc19e3045c3,73d471ead270d371,5062746343444fa8,8e087e5cf921bba2","title":"NFDC","tab":"86d0cb9485e5115f","min_cols":6,"max_cols":"20","unicast":"ignore","parent":"69c2e3f5798c3475","solid":false,"cols":"1","rows":"1"},{"id":"86d0cb9485e5115f","type":"flexdash tab","name":"Status","icon":"mdi-view-dashboard","title":"Machine Status","fd_children":",a96ede31d15e8fcc","fd":"e8f5aea52ab49500"},{"id":"69c2e3f5798c3475","type":"flexdash container","name":"Demo grid","kind":"StdGrid","fd_children":",9a180f1ef444158f,9e8e0553e01aa7d6,3fe1da77bb1eba36,7e5af03cd7a62a33,30f958ce39c89884,3df71a651476ba16,2582a4c3e5ae0e0e,d20e536f9e35263e","title":"","tab":"fef6c0f6d48841d6","min_cols":"1","max_cols":"6","parent":"","solid":false,"cols":"1","rows":"1"},{"id":"fef6c0f6d48841d6","type":"flexdash tab","d":true,"name":"Demo","icon":"mdi-view-dashboard","title":"","fd_children":",69c2e3f5798c3475","fd":"e8f5aea52ab49500"}]
6 Likes
what should i put value="2022-12-01" here so that i get default as current date,
I tried
- new Date() but the display becomes blank.
- left value = "" blank, and kind of works that when i click it shows the current date highlighted on calendar, but initial display before selection is yyyy-mm-dd. which for now i can live with.
but is there a way to get display of current date as default ? - also, if a date is already selected and i want the same date to be picked again, there is no click event (may be because @change event ?), how can i achieve the same? (for some reason in my flow i go between dates using this widget and i also have a parallel button that sends current datetime for the graph to go live, but this date widget keeps showing the previously selected date, if i could transfer the selected date to default date, that would solve the purpose, something like value =
msg.selected_date) - also if i get the solution to above current date i hope same will work for max=current date since i dont have data in database for future and min = the oldest date available in the data base, which i can pass on from a mysql query.
<template>
<div class="pushbutton d-flex align-center justify-center">
<input type="date"
value="2022-12-01"
min="2022-04-01" max="2025-12-31" @change="changed($event.target.value)">
</div>
</template>
1 Like
Ah, now you get into the fun part of figuring out how to make that date input dance! I don't have any off-the-cuff answers, but unless someone here knows and chimes in you're probably in to reading that MDN web page about the input from top to bottom... Maybe you need an @click handler too, but that may not carry the target.value so you may have to hunt for the value, etc.
Rather than new Date() you may try Date.now()...
I can read only the English part of it. HTML /Java absolutely no understanding.
Just gives yyyy-mm-dd place holder, but still calendar opens with current date highlighted. same as a blank value feed.
I am not pursuing this option of getting a output if previous value is still same. i re-programmed my flow to avoid this situaation.
Only if i could get a variable value passed on into the template some how.
I tried several ways but setting a default date in the datepicker node is looking impossible with my understanding
i tried several ways in the MDN Page TRY IT OUT section, I don't understand HTML, so ...
It is very simple in the NR-Dashboard. i believe it should also be very simple in FD too. i will wait till you sort it out.
I made some progress regarding default date. However, somebody with vue.js experience could make this prettier, most likely.
Here's the flow (it takes the current date and feeds it into the date picker in the browser):
flow
[
{
"id": "3b73bf0142d0cbcc",
"type": "tab",
"label": "flexdash date tests",
"disabled": false,
"info": "",
"env": []
},
{
"id": "1d4c8a83206b5397",
"type": "inject",
"z": "3b73bf0142d0cbcc",
"name": "CLEAR",
"props": [
{
"p": "label",
"v": "",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 550,
"y": 60,
"wires": [
[
"a33bbbc19e3045c3"
]
]
},
{
"id": "2d22a68715826c8f",
"type": "debug",
"z": "3b73bf0142d0cbcc",
"name": "debug 97",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 680,
"y": 160,
"wires": []
},
{
"id": "2fb3869daefce3b3",
"type": "change",
"z": "3b73bf0142d0cbcc",
"name": "",
"rules": [
{
"t": "set",
"p": "label",
"pt": "msg",
"to": "payload._vts",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 690,
"y": 120,
"wires": [
[]
]
},
{
"id": "5062746343444fa8",
"type": "flexdash custom",
"z": "3b73bf0142d0cbcc",
"fd_container": "a96ede31d15e8fcc",
"fd_cols": "2",
"fd_rows": "1",
"fd_array": false,
"fd_array_max": 10,
"fd_output_topic": "",
"fd_loopback": false,
"name": "Date Picker",
"title": "",
"sfc_source": "<template>\n <div class=\"pushbutton d-flex align-center justify-center\">\n <input type=\"date\" \n v-model=\"date_value\"\n min=\"2022-04-01\" max=\"2025-12-31\" @change=\"changed($event.target.value)\">\n </div>\n</template>\n\n\n<style scoped>\n .label { color: red; }\n</style>\n\n<script>\nexport default { \n // Props are the inputs to the widget.\n // They can be set dynamically using Node-RED messages using `msg.<prop>`.\n // In a \"custom widget\" like this one they cannot be set via the Node-RED flow editor:\n // use the default values in the lines below instead.\n props: {\n //label: { default: \"clickme\" }, // text to show inside button\n //output: { default: \"I was clicked\" }, // value to output when clicked\n payload: { default: \"2022-12-31\"}\n },\n\n// static default, will be overwritten bei NR\ndata: () => ({\n date_value: \"\",\n}),\n\ncreated(){\n this.date_value = this.payload // date picker init value\n},\n\nwatch: { \n \tpayload: function(newVal, oldVal) { // watch payload from NR\n console.log('payload prop changed: ', newVal, ' | was: ', oldVal)\n this.date_value = newVal // set new date value which was sent form Node-RED\n },\n\n date_value: function(newVal, oldVal){\n console.log(\"date_value changed\")\n console.log(\"payload: \", this.payload)\n }\n },\n\n\n emits: ['send'], // declare to Vue that this component emits a 'send' event\n\n // simple methods within the component\n \n methods: {\n changed(ev) {\n console.log(\"Date picker event:\", ev)\n \n //console.log(\"payload: \", this.payload)\n this.$emit('send', ev)\n },\n },\n \n}\n</script>\n",
"import_map": {},
"x": 510,
"y": 120,
"wires": [
[
"2fb3869daefce3b3",
"2d22a68715826c8f",
"dce8f86f5c81764c"
]
]
},
{
"id": "dce8f86f5c81764c",
"type": "moment",
"z": "3b73bf0142d0cbcc",
"name": "",
"topic": "",
"input": "payload",
"inputType": "msg",
"inTz": "Asia/Calcutta",
"adjAmount": 0,
"adjType": "days",
"adjDir": "add",
"format": "DD-MMM-YYYY HH:mm:ss",
"locale": "en-US",
"output": "label",
"outputType": "msg",
"outTz": "Asia/Calcutta",
"x": 700,
"y": 220,
"wires": [
[
"a33bbbc19e3045c3"
]
]
},
{
"id": "8e087e5cf921bba2",
"type": "flexdash custom",
"z": "3b73bf0142d0cbcc",
"fd_container": "a96ede31d15e8fcc",
"fd_cols": "2",
"fd_rows": 1,
"fd_array": false,
"fd_array_max": 10,
"fd_output_topic": "",
"fd_loopback": false,
"name": "Clear",
"title": "",
"sfc_source": "<template>\n <v-btn variant=\"elevated\" class=\"ma-auto\" @click=\"clicked()\">\n <span class=\"label\">{{ label }}</span>\n </v-btn>\n</template>\n\n<style scoped>\n .label { color: red; }\n</style>\n\n<script>\nexport default {\n // Props are the inputs to the widget.\n // They can be set dynamically using Node-RED messages using `msg.<prop>`.\n // In a \"custom widget\" like this one they cannot be set via the Node-RED flow editor:\n // use the default values in the lines below instead.\n props: {\n label: { default: \"Clear\" }, // text to show inside button\n output: { default: \"I was clicked\" }, // value to output when clicked\n },\n\n emits: ['send'], // declare to Vue that this component emits a 'send' event\n\n // simple methods within the component\n methods: {\n clicked() { // handle the clicking of the button, i.e., the handler for the '@click'\n this.$emit('send', this.output) // emit an event (Vue concept), a 'send' event goes to NR\n },\n },\n}\n</script>\n",
"import_map": {},
"x": 620,
"y": 320,
"wires": [
[
"6fad132103d1ccf0"
]
]
},
{
"id": "6fad132103d1ccf0",
"type": "change",
"z": "3b73bf0142d0cbcc",
"name": "",
"rules": [
{
"t": "set",
"p": "label",
"pt": "msg",
"to": "",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 770,
"y": 320,
"wires": [
[
"a33bbbc19e3045c3"
]
]
},
{
"id": "a33bbbc19e3045c3",
"type": "fd-label",
"z": "3b73bf0142d0cbcc",
"fd_container": "a96ede31d15e8fcc",
"fd_cols": 3,
"fd_rows": 1,
"fd_array": false,
"fd_array_max": 10,
"name": "",
"title": "Selected Date",
"popup_info": "",
"label": null,
"color": "",
"align": "center",
"justify": "center",
"weight": "400",
"size": "100%",
"padding": "4px",
"x": 870,
"y": 60,
"wires": []
},
{
"id": "21d6c261302d1ef9",
"type": "inject",
"z": "3b73bf0142d0cbcc",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": true,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 110,
"y": 80,
"wires": [
[
"2296009980c4eb5d"
]
]
},
{
"id": "952fca1459fe97dd",
"type": "debug",
"z": "3b73bf0142d0cbcc",
"name": "debug 98",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 720,
"y": 380,
"wires": []
},
{
"id": "2296009980c4eb5d",
"type": "function",
"z": "3b73bf0142d0cbcc",
"name": "date",
"func": "msg.payload = new Date()\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 190,
"y": 260,
"wires": [
[
"b221bc0ece5c8b17"
]
]
},
{
"id": "b221bc0ece5c8b17",
"type": "moment",
"z": "3b73bf0142d0cbcc",
"name": "current date",
"topic": "",
"input": "payload",
"inputType": "msg",
"inTz": "Asia/Calcutta",
"adjAmount": 0,
"adjType": "days",
"adjDir": "add",
"format": "YYYY-MM-DD",
"locale": "en-US",
"output": "payload",
"outputType": "msg",
"outTz": "Asia/Calcutta",
"x": 350,
"y": 260,
"wires": [
[
"5062746343444fa8"
]
]
},
{
"id": "a96ede31d15e8fcc",
"type": "flexdash container",
"name": "NFDC",
"kind": "StdGrid",
"fd_children": ",7d8110bad209c9b4,e7c4f917522b9e07,a33bbbc19e3045c3,73d471ead270d371,5062746343444fa8,8e087e5cf921bba2",
"title": "NFDC",
"tab": "86d0cb9485e5115f",
"min_cols": "6",
"max_cols": "20",
"unicast": "ignore",
"parent": "",
"solid": false,
"cols": "1",
"rows": "1"
},
{
"id": "86d0cb9485e5115f",
"type": "flexdash tab",
"name": "Status",
"icon": "mdi-view-dashboard",
"title": "Machine Status",
"fd_children": ",a96ede31d15e8fcc",
"fd": "8c6540ab2d9a3573"
}
]
It's work in progress ...
2 Likes
Looks great!
Tip: instead of this:
created(){
this.date_value = this.payload // date picker init value
},
watch: {
payload: function(newVal, oldVal) { // watch payload from NR
console.log('payload prop changed: ', newVal, ' | was: ', oldVal)
this.date_value = newVal // set new date value which was sent form Node-RED
},
You can write:
watch: {
payload: {
immediate: true, // call handler when payload is first set
handler(newVal, oldVal) {
console.log('payload prop changed: ', newVal, ' | was: ', oldVal)
this.date_value = newVal // set new date value which was sent form Node-RED
},
I don't know exactly the semantics you're looking for, but you may be able to completely omit date_value. In the template you're using a two-way binding v-model but you never use what date_value is being changed to 'cause you're using the @change event (which is the right thing to do). So you can simply write:
<input type="date"
:value="payload"
min="2022-04-01" max="2025-12-31"
@change="changed($event.target.value)">
The two-way vs. one-way bindings with input elements are difficult to understand and I don't really understand them fully.
Nice work!
1 Like
This is great....
how do we extend the same to min and max date ?
i tried to do with payload1 and payload2 but the code totally messed up.
Sure, for example by converting the payload into an object with default, min and max values:
Flow
[
{
"id": "3b73bf0142d0cbcc",
"type": "tab",
"label": "flexdash date tests",
"disabled": false,
"info": "",
"env": []
},
{
"id": "1d4c8a83206b5397",
"type": "inject",
"z": "3b73bf0142d0cbcc",
"name": "CLEAR",
"props": [
{
"p": "label",
"v": "",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 550,
"y": 60,
"wires": [
[
"a33bbbc19e3045c3"
]
]
},
{
"id": "2d22a68715826c8f",
"type": "debug",
"z": "3b73bf0142d0cbcc",
"name": "debug 97",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 680,
"y": 160,
"wires": []
},
{
"id": "2fb3869daefce3b3",
"type": "change",
"z": "3b73bf0142d0cbcc",
"name": "",
"rules": [
{
"t": "set",
"p": "label",
"pt": "msg",
"to": "payload._vts",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 690,
"y": 120,
"wires": [
[]
]
},
{
"id": "5062746343444fa8",
"type": "flexdash custom",
"z": "3b73bf0142d0cbcc",
"fd_container": "a96ede31d15e8fcc",
"fd_cols": "2",
"fd_rows": "1",
"fd_array": false,
"fd_array_max": 10,
"fd_output_topic": "",
"fd_loopback": false,
"name": "Date Picker",
"title": "",
"sfc_source": "<template>\n <div class=\"pushbutton d-flex align-center justify-center\">\n <input type=\"date\" \n :value=payload.default\n :min=payload.min :max=payload.max @change=\"changed($event.target.value)\">\n </div>\n</template>\n\n\n<style scoped>\n .label { color: red; }\n</style>\n\n<script>\nexport default { \n // Props are the inputs to the widget.\n // They can be set dynamically using Node-RED messages using `msg.<prop>`.\n // In a \"custom widget\" like this one they cannot be set via the Node-RED flow editor:\n // use the default values in the lines below instead.\n props: {\n payload: { default: {default: \"2022-12-31\", min: \"2022-12-31\", max: \"2022-12-31\"} }\n },\n\n\n emits: ['send'], // declare to Vue that this component emits a 'send' event\n\n // simple methods within the component\n \n methods: {\n changed(ev) {\n console.log(\"Date picker event:\", ev)\n \n //console.log(\"payload: \", this.payload)\n this.$emit('send', ev)\n },\n },\n \n}\n</script>\n\n\n",
"import_map": {},
"x": 510,
"y": 120,
"wires": [
[
"2fb3869daefce3b3",
"2d22a68715826c8f",
"dce8f86f5c81764c"
]
]
},
{
"id": "dce8f86f5c81764c",
"type": "moment",
"z": "3b73bf0142d0cbcc",
"name": "",
"topic": "",
"input": "payload",
"inputType": "msg",
"inTz": "Asia/Calcutta",
"adjAmount": 0,
"adjType": "days",
"adjDir": "add",
"format": "DD-MMM-YYYY HH:mm:ss",
"locale": "en-US",
"output": "label",
"outputType": "msg",
"outTz": "Asia/Calcutta",
"x": 700,
"y": 220,
"wires": [
[
"a33bbbc19e3045c3"
]
]
},
{
"id": "8e087e5cf921bba2",
"type": "flexdash custom",
"z": "3b73bf0142d0cbcc",
"fd_container": "a96ede31d15e8fcc",
"fd_cols": "2",
"fd_rows": 1,
"fd_array": false,
"fd_array_max": 10,
"fd_output_topic": "",
"fd_loopback": false,
"name": "Clear",
"title": "",
"sfc_source": "<template>\n <v-btn variant=\"elevated\" class=\"ma-auto\" @click=\"clicked()\">\n <span class=\"label\">{{ label }}</span>\n </v-btn>\n</template>\n\n<style scoped>\n .label { color: red; }\n</style>\n\n<script>\nexport default {\n // Props are the inputs to the widget.\n // They can be set dynamically using Node-RED messages using `msg.<prop>`.\n // In a \"custom widget\" like this one they cannot be set via the Node-RED flow editor:\n // use the default values in the lines below instead.\n props: {\n label: { default: \"Clear\" }, // text to show inside button\n output: { default: \"I was clicked\" }, // value to output when clicked\n },\n\n emits: ['send'], // declare to Vue that this component emits a 'send' event\n\n // simple methods within the component\n methods: {\n clicked() { // handle the clicking of the button, i.e., the handler for the '@click'\n this.$emit('send', this.output) // emit an event (Vue concept), a 'send' event goes to NR\n },\n },\n}\n</script>\n",
"import_map": {},
"x": 620,
"y": 320,
"wires": [
[
"6fad132103d1ccf0"
]
]
},
{
"id": "6fad132103d1ccf0",
"type": "change",
"z": "3b73bf0142d0cbcc",
"name": "",
"rules": [
{
"t": "set",
"p": "label",
"pt": "msg",
"to": "",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 770,
"y": 320,
"wires": [
[
"a33bbbc19e3045c3"
]
]
},
{
"id": "21d6c261302d1ef9",
"type": "inject",
"z": "3b73bf0142d0cbcc",
"name": "",
"props": [
{
"p": "payload.default",
"v": "$now()",
"vt": "jsonata"
},
{
"p": "payload.min",
"v": "2022-04-01",
"vt": "str"
},
{
"p": "payload.max",
"v": "2025-12-31",
"vt": "str"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": true,
"onceDelay": 0.1,
"topic": "",
"x": 150,
"y": 120,
"wires": [
[
"b221bc0ece5c8b17"
]
]
},
{
"id": "b221bc0ece5c8b17",
"type": "moment",
"z": "3b73bf0142d0cbcc",
"name": "current date",
"topic": "",
"input": "payload.default",
"inputType": "msg",
"inTz": "Asia/Calcutta",
"adjAmount": 0,
"adjType": "days",
"adjDir": "add",
"format": "YYYY-MM-DD",
"locale": "en-US",
"output": "payload.default",
"outputType": "msg",
"outTz": "Asia/Calcutta",
"x": 330,
"y": 120,
"wires": [
[
"5062746343444fa8"
]
]
},
{
"id": "a33bbbc19e3045c3",
"type": "fd-label",
"z": "3b73bf0142d0cbcc",
"fd_container": "a96ede31d15e8fcc",
"fd_cols": 3,
"fd_rows": 1,
"fd_array": false,
"fd_array_max": 10,
"name": "",
"title": "Selected Date",
"popup_info": "",
"label": null,
"color": "",
"align": "center",
"justify": "center",
"weight": "400",
"size": "100%",
"padding": "4px",
"x": 870,
"y": 60,
"wires": []
},
{
"id": "a96ede31d15e8fcc",
"type": "flexdash container",
"name": "NFDC",
"kind": "StdGrid",
"fd_children": ",7d8110bad209c9b4,e7c4f917522b9e07,a33bbbc19e3045c3,73d471ead270d371,5062746343444fa8,8e087e5cf921bba2",
"title": "NFDC",
"tab": "86d0cb9485e5115f",
"min_cols": "6",
"max_cols": "20",
"unicast": "ignore",
"parent": "",
"solid": false,
"cols": "1",
"rows": "1"
},
{
"id": "86d0cb9485e5115f",
"type": "flexdash tab",
"name": "Status",
"icon": "mdi-view-dashboard",
"title": "Machine Status",
"fd_children": ",a96ede31d15e8fcc",
"fd": "8c6540ab2d9a3573"
}
]
All three values can be set in the inject node (see screenshot below) and I removed the "helper" variable date_value completely as @tve suggested.
3 Likes
I forgot to thank you. 
1 Like
No problem! These questions help me to get familiar with flexdash as well 
2 Likes
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
