# 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:** 15\
**Page:** 2

<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:25 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/21 "2022-12-29T19:25:33Z")

</div>

![datepick1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/0/d08baba69adde0e330a4ce6fd7da757827690854.gif)

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

![datepick2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/a/bab03e89943cfe8679458aa3a652133d212680b7.gif)

---

<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:29 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/22 "2022-12-29T19:29:19Z")

</div>

Using the @change event, the value is in `$event.target.value`

---

<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:37 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/23 "2022-12-29T19:37:40Z")

</div>

Okay, getting closer:

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

```

---

<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:41 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/24 "2022-12-29T19:41:37Z")

</div>

Bingo !

![datepick3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/f/8fb21128ebe42ccdb258afcf450997e70ce6640a.gif)

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

```

---

<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:** [30 December 2022 04:45 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/25 "2022-12-30T04:45:32Z")

</div>

what should i put `value="2022-12-01"` here so that i get default as current date,  
I tried

1. new Date() but the display becomes blank.
2. 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 ?
3. 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`)
4. 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.

```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" @change="changed($event.target.value)">
  </div>
</template>

```

---

<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:** [30 December 2022 07:07 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/26 "2022-12-30T07:07:05Z")

</div>

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

---

<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:** [30 December 2022 07:26 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/27 "2022-12-30T07:26:33Z")

</div>

> [@tve](#):
>
> you're probably in to reading that MDN web page

I can read only the _English_ part of it. HTML /Java absolutely no understanding.

> [@tve](#):
>
> try Date.now()

Just gives `yyyy-mm-dd` place holder, but still calendar opens with current date highlighted. same as a blank value feed.

> [@tve](#):
>
> Maybe you need an @click handler too

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.

---

<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:** [30 December 2022 16:00 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/28 "2022-12-30T16:00:23Z")

</div>

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.

![datepick_default](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/f/9f5f04dc7fc04b936416789958a5f011a58a73f7.gif)

---

<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:** [2 January 2023 22:57 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/29 "2023-01-02T22:57:41Z")

</div>

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**
>
> ```auto
> [
> {
> "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 ...

---

<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:** [2 January 2023 23:23 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/30 "2023-01-02T23:23:43Z")

</div>

Looks great!

Tip: instead of this:

```auto

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:

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

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

---

<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:** [3 January 2023 00:06 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/31 "2023-01-03T00:06:15Z")

</div>

This is great....

how do we extend the same to min and max date ?

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

i tried to do with payload1 and payload2 but the code totally messed up.

---

<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:** [3 January 2023 01:05 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/32 "2023-01-03T01:05:31Z")

</div>

Sure, for example by converting the payload into an object with `default`, `min` and `max` values:

> **Flow**
>
> ```auto
> [
> {
> "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.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/3/6333753d4e1cfd1758b63f55653c6c9cb2b36105.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:** [4 January 2023 10:38 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/33 "2023-01-04T10:38:44Z")

</div>

I forgot to thank you. 🤝

---

<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:** [4 January 2023 10:49 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/34 "2023-01-04T10:49:46Z")

</div>

No problem! These questions help me to get familiar with flexdash as well 🙃

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [18 January 2023 10:50 UTC](https://discourse.nodered.org/t/datepicker-in-flexdash/72803/35 "2023-01-18T10:50:32Z")

</div>

Closed on 18 January 2023 10:50 UTC

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.

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