Is there a datepicker widget in Flexdash?
I tried dropdown widget but is not working
No datepicker yet 
I'm waiting for Vuetify to implement one, I hope it's not gonna take forever...
What do you mean by "dropdown widget but is not working"?
I fed the below msg.payload into the widget, but i cannot see dropdown as i expected.
[["2022-12-28"],["2022-12-27"],["2022-12-26"],["2022-12-25"],["2022-12-24"],["2022-12-23"],["2022-12-22"],["2022-12-21"],["2022-12-20"],["2022-12-19"]]
i see this
Looks like I don't have an example... The props are as follows:
- labels should be an array of strings, that's what you will see in the drop-down
- choices should be a corresponding array of strings or numbers, that's the set of values that the widget will output (corresponding 1-1 to the labels)
- payload should be one of the choices (IIRC) if you want to set the dropdown to a specific choice (as opposed to just the first one)
can you please give an example flow. i am unable to get it right after several attempts also.
I have this data which needs to be populated. i know it is not in the required format, but i dont know what is the correct format and how to get it.
[{"id":"f756ee0e96714565","type":"inject","z":"1543d308b342690a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"Date\":\"2022-12-28\"},{\"Date\":\"2022-12-27\"},{\"Date\":\"2022-12-26\"},{\"Date\":\"2022-12-25\"},{\"Date\":\"2022-12-24\"},{\"Date\":\"2022-12-23\"},{\"Date\":\"2022-12-22\"},{\"Date\":\"2022-12-21\"},{\"Date\":\"2022-12-20\"},{\"Date\":\"2022-12-19\"}]","payloadType":"str","x":330,"y":2420,"wires":[["fcb2ef997dba8ff2"]]}]
[{"id":"f756ee0e96714565","type":"inject","z":"90ec50352c780a32","name":"","props":[{"p":"choices","v":"[\"2022-12-28\",\"2022-12-27\",\"2022-12-26\",\"2022-12-25\",\"2022-12-24\",\"2022-12-23\",\"2022-12-22\",\"2022-12-21\",\"2022-12-20\",\"2022-12-19\"]","vt":"json"},{"p":"labels","v":"[\"2022-12-28\",\"2022-12-27\",\"2022-12-26\",\"2022-12-25\",\"2022-12-24\",\"2022-12-23\",\"2022-12-22\",\"2022-12-21\",\"2022-12-20\",\"2022-12-19\"]","vt":"json"},{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"2022-12-26","payloadType":"str","x":150,"y":1060,"wires":[["224c590ca35688ed"]]},{"id":"224c590ca35688ed","type":"fd-dropdown-select","z":"90ec50352c780a32","fd_container":"5706d648a3e5e7bf","fd_cols":1,"fd_rows":1,"fd_array":false,"fd_array_max":10,"fd_output_topic":"","fd_loopback":false,"name":"","title":"Dropdown Select","popup_info":"","enabled":true,"value":null,"choices":[],"labels":[],"allow_multiple":false,"color":"","x":340,"y":1060,"wires":[[]]},{"id":"5706d648a3e5e7bf","type":"flexdash container","name":"demo all grid","kind":"StdGrid","fd_children":",681967b1dcbdc45d,9c0c7165cb86de68,c8d25a6f5bc9242d,d0ab9d5688fbd947,d2c133da1a043679,1d235058a33a5e73,a54978c502390e97,b6f62cfad74e1451,be8061669555edeb,be4d9c105d072dd7,7dacfc1a4db7e118,f76e1b7cb09977f8,cf38127b0f1242b4,0da53c03d6fb7619,b9a21c19a0c7c362,5535e621ade0e3e0,f1c97ab04f25d698,675263a8440a43c7,224c590ca35688ed","title":"","tab":"e8d66b51b7d3600c","min_cols":4,"max_cols":"10","parent":"","solid":true,"cols":"2","rows":"1"},{"id":"e8d66b51b7d3600c","type":"flexdash tab","name":"","icon":"mdi-rocket","title":"demo-all","fd_children":",5706d648a3e5e7bf","fd":"e8f5aea52ab49500"}]
1 Like
Oh Shoot.
I was supposed to send msg.choices and not msg.payload. not concentrating enough.
I got it to working.
I think i have been working too long since yesterday, time to take a break. (brain fade ?)
1 Like
Input type=date is a standard html element dont need anything special to do for it.
Or even with a time picker
1 Like
A classic case of "Just because you have a hammer, it doesn't mean that everything is a nail"? 
1 Like
After struggling and looking up and trying to understand, (failed), i managed to get upto this point, but am unable to get the output from the widget.
please guide me.
What i tried :
followed the guidelines of how to make custom widget
copied a custom widget push-button from here
replaced the template part in the code with link suggested by @bakman2
was able to get a widget that offers a date to be picked from a calendar and thats it. i dont get any output from the debug node connected to the widget. i know it has something to be done in the function for clickevent or emit ... but this is the level i could go
any help is appreciated.
- how to make the default date as current date
- how to get a date value out from the widget after selecting a date
my example flow
[{"id":"e7c4f917522b9e07","type":"flexdash custom","z":"bbf5094bc59a03b8","fd_container":"56fa98cd5cd777d6","fd_cols":"2","fd_rows":1,"fd_array":false,"fd_array_max":10,"fd_output_topic":"","fd_loopback":false,"name":"CustomWidget","title":"","sfc_source":"<!-- PushButton - Simple button that sends a message when clicked\n Copyright ©2021 Thorsten von Eicken, MIT license, see LICENSE file\n-->\n<template>\n<label for=\"start\">Start date:</label>\n\n<input type=\"date\" id=\"start\" name=\"trip-start\"\n value=\"2022-12-01\"\n min=\"2022-04-01\" max=\"2025-12-31\">\n</template>\n\n<script scoped>\nexport default {\n name: 'PushButton-Datepicker',\n\n help: `Button to send an event.\nPressing the button sends a message with a specified payload to a topic.\nThe button may contain an icon and/or a title string and is centered in the widget.\nIcon names can be found at https://materialdesignicons.com.`,\n\n props: {\n enabled: { default: true },\n color: { default: \"primary\" },\n output_value: { default: 25, tip: \"value sent on click\" },\n icon: { default: null, tip: \"material-design-icon name w/mdi- prefix\" },\n title: { default: 'Button' },\n },\n\n output: { default: null },\n\n computed: {\n // actual bindings passed into v-btn\n bindings() { return {\n disabled: !this.enabled,\n color: this.color,\n }},\n\n },\n\n methods: {\n clickEv(ev) {\n this.$emit('send', this.output_value)\n },\n },\n\n}\n</script>\n\n<style scoped>\n.pushbutton { height: 100%; }\n</style>","import_map":{},"x":420,"y":1000,"wires":[["2d22a68715826c8f"]]},{"id":"1d4c8a83206b5397","type":"inject","z":"bbf5094bc59a03b8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":230,"y":920,"wires":[["af7d0a01c1a801a5","73d471ead270d371","e7c4f917522b9e07"]]},{"id":"56fa98cd5cd777d6","type":"flexdash container","name":"","kind":"StdGrid","fd_children":",97e34cb72c2f36bd,3906bc23b517eba1,fc25ac3e5be52848,18ddcc9a519cc27b,da1280a33ea71b1d,b8728e5264991cd7,91fc686c95fc097c,4108e37a26f05b8e,c88a3eb7ea861efc,2b297c5614ac7fee,c3dd2ab159e2b468,af7d0a01c1a801a5,73d471ead270d371,e7c4f917522b9e07","title":"","tab":"09b8188bac11a9da","min_cols":"1","max_cols":"12","unicast":"ignore","parent":"","solid":false,"cols":"1","rows":"1"},{"id":"09b8188bac11a9da","type":"flexdash tab","name":"New","icon":"mdi-view-dashboard","title":"Cryovac Filling Temperature ","fd_children":",56fa98cd5cd777d6","fd":"e8f5aea52ab49500"}]
1 Like
Yup. You need to atach an event handler to your input. Looks like it produces an @change event so you need to put @click="clickEv($event)" into your template ($event is the event generated by the date picker element) and then you need to put that into the $emit instead of the output_value, which you can completely remove from the widget.
sorry, i don't understand. where exactly should i put this line within the function node? i tried putting within the below code, which i see is wrong after looking at the dashboard.
<template>
<label for="start">Start date:</label>
<input type="date" id="start" name="trip-start"
value="2022-12-01"
min="2022-04-01" max="2025-12-31">
</template>
I dont want you to completely do the change for me in the function, i want to get my hands on and learn if possible, but with no knowledge of how this works. (I did only copy paste) it will take for ever
Append:
i figured out where to put the @click="clickEv($event)" as below
and I got a click event happening., and able to out put the default value set in the props.
but second part i could not figure out, to get the actual selected value (date, here)
<template>
<div class="pushbutton d-flex align-center justify-center">
<v-btn
@click="clickEv($event)">
<input type="date" id="start" name="trip-start"
value="2022-12-01"
min="2022-04-01" max="2025-12-31">
</v-btn>
</div>
</template>
this needs a little more understanding for me.
For the @click look at the button example for the custom widget (the code that appears when you create a new custom node). It has the @click event handler. The @ is a shortcut for v-on in vue, see Event Handling | Vue.js
Edit: you have the @click attached to the wrong element, you don't need/want a v-btn.
Update: if it's not working, paste the template and the methods section here...
I got upto getting the output from the button, but it is giving only the default value, (which is 25 here below as per your custom widget button example, defined in the props section as default: 25), i dont understand what should i put here to get what i clicked in the date selection panel
<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" @click="clicked()">
</div>
</template>
props: {
enabled: { default: true },
color: { default: "primary" },
output_value: { default: 25, tip: "value sent on click" },
icon: { default: null, tip: "material-design-icon name w/mdi- prefix" },
title: { default: 'Button' },
},
methods: {
clicked() {
this.$emit('send', this.output_value)
},
},
1 Like
Your @click expression is getting the event as $event, you need to pass that to the clicked method.
Your clicked method then needs a parameter, say ev, and you need to $emit that instead of this.output_value.
Does that make sense?
I understand that i need to change
this in template section,
this in props ?
and here something.
but what is actually to be done, is beyond me.
(its me having issue understanding, no problem with the teacher)
Edit:
At this point, I don't mind a full spoon feed, i will learn in another custom widget....
In @click="clicked()"> the stuff within the " is a javascript expression. It's being passed $event. You need to pass that event on to your method clicked. So write @click="clicked($event)".
Then your clicked method needs to pass that event on to FlexDash so it eventually shows up in Node-RED. So first you need to declare that clicked expects a parameter: clicked(ev). And then pass it on: this.$emit('send', ev). You can add a console.log in there so you can see in the browser console what the event looks like:
methods: {
clicked(ev) {
console.log("Date picker event:", ev)
this.$emit('send', ev)
},
},
The whole thing is just about passing the event value on...
(I don't know how the event generated by the date picker looks like, you may want to pass on one of its fields and not the whole event.)
Note: you could also have written @click="$emit('send', $event)" and left out the entire clicked method, but that makes it more difficult to tweak things or to add a console.log statement to see what's going on.
Appreciate your patience and excellent teaching skills.
got most of the stuff. and started to get output from the widget,
the output payload is like this
{"isTrusted":true,"_vts":1672341252600}
so i took only the _vts part and used it.
One issue though,
the output does not WAIT till i select a date, as soon as i click on the calendar icon, it sends out a message, which is current datetime.
after clicking any date in the calendar, it keeps on sending current datetime.
Hey there, I am also trying to learn this atm. Try @change instead of @click maybe helps? However, I could not find the value in the object either.
Great!
What behavior would you like?
Ooops, I got clicked and change crossed along the way. You indeed want @change and the event may look different as a result.
But I suspect this may still not be the desired behavior.
