# Datepicker in Flexdash

**URL:** <https://discourse.nodered.org/t/datepicker-in-flexdash/72803>\
**Category:** General\
**Tags:** flexdash\
**Created:** [28 December 2022 07:38 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803 "2022-12-28T07:38:26Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [28 December 2022 07:38 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/1 "2022-12-28T07:38:26Z")

</div>

Is there a datepicker widget in Flexdash?  
I tried dropdown widget but is not working

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [28 December 2022 07:39 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/2 "2022-12-28T07:39:58Z")

</div>

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"?

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [28 December 2022 07:43 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/3 "2022-12-28T07:43:02Z")

</div>

I fed the below msg.payload into the widget, but i cannot see dropdown as i expected.

```auto
[["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"]]

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/e/8ecb64fdd803b057985b07638d3bf99e015062c8.png)

i see this  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/e/3ed22850c26799b096501e3a3a215fd3128f5e65.png)

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [28 December 2022 07:58 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/4 "2022-12-28T07:58:14Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [28 December 2022 08:33 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/5 "2022-12-28T08:33:12Z")

</div>

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.

```auto
[{"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"]]}]

```

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [28 December 2022 08:41 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/6 "2022-12-28T08:41:23Z")

</div>

```auto
[{"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"}]

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/b/2bbe8dd418d1172460a67ef32f621164146473f0.png)

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [28 December 2022 08:49 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/7 "2022-12-28T08:49:49Z")

</div>

Oh Shoot.  
I was supposed to send `msg.choices` and not `msg.payload`. not concentrating enough.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/5/f5c819597c9b5f5e492738114621023277164719.png)

I got it to working.  
I think i have been working too long since yesterday, time to take a break. (brain fade ?)

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [28 December 2022 09:44 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/8 "2022-12-28T09:44:11Z")

</div>

Input type=date is a standard html element dont need anything special to do for it.

Or even with a time picker

> **[\- HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local)**
>
> elements of type datetime-local create input controls that let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [28 December 2022 13:14 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/9 "2022-12-28T13:14:08Z")

</div>

> [@bakman2](#):
>
> Input type=date is a standard html element dont need anything special to do for it.

A classic case of "Just because you have a hammer, it doesn't mean that everything is a nail"? 😉

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [29 December 2022 12:54 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/10 "2022-12-29T12:54:20Z")

</div>

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

> **Summary**
>
> [flexdash/push-button.vue at main · flexdash/flexdash · GitHub](https://github.com/flexdash/flexdash/blob/main/src/widgets/push-button.vue)

replaced the template part in the code with link suggested by @bakman2

> **Summary**
>
> [\<input type="date"\> - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)

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.

1. how to make the default date as current date
2. how to get a date value out from the widget after selecting a date

![datepick](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/6/a6c9ff7a04922496ee95272ab811156012fd4b6a.gif)

my example flow

```auto
[{"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"}]

```

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [29 December 2022 16:46 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/11 "2022-12-29T16:46:57Z")

</div>

> [@smanjunath211](#):
>
> i know it has something to be done in the function for clickevent or emit

Yup. You need to atach an event handler to your input. Looks like it produces an [@change event](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#technical_summary) 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.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [29 December 2022 17:21 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/12 "2022-12-29T17:21:26Z")

</div>

> [@tve](#):
>
> @click="clickEv($event)"

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.

```auto
<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)

```auto
<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>

```

> [@tve](#):
>
> then you need to put that into the $emit instead of the output\_value

this needs a little more understanding for me.

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [29 December 2022 18:00 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/13 "2022-12-29T18:00:40Z")

</div>

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](https://vuejs.org/guide/essentials/event-handling.html#listening-to-events)

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

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [29 December 2022 18:30 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/14 "2022-12-29T18:30:18Z")

</div>

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

```auto
<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>

```

```auto
 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' },
  },

```

```auto
  methods: {
clicked() {
      this.$emit('send', this.output_value)
    },
  },

```

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [29 December 2022 18:33 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/15 "2022-12-29T18:33:55Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [29 December 2022 18:39 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/16 "2022-12-29T18:39:09Z")

</div>

I understand that i need to change

> [@smanjunath211](#):
>
> `@click="clicked()"`

this in template section,

> [@smanjunath211](#):
>
> `output_value: { default: 25, tip: "value sent on click" },`

this in props ?

> [@smanjunath211](#):
>
> `this.$emit('send', this.output_value)`

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

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [29 December 2022 18:47 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/17 "2022-12-29T18:47:19Z")

</div>

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:

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

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [29 December 2022 19:16 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/18 "2022-12-29T19:16:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rko/32/45807_2.png) [@rko](https://discourse.nodered.org/u/rko)\
**Post date:** [29 December 2022 19:20 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/19 "2022-12-29T19:20:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [29 December 2022 19:21 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/20 "2022-12-29T19:21:12Z")

</div>

Great!  
What behavior would you like?

> [@rko](#):
>
> Try `@change` instead of `@click` maybe helps?

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.

[Next page](https://discourse.nodered.org/t/datepicker-in-flexdash/72803.md?page=2)