# Node-RED Dashboard - ui template, custom Month-Picker, how to make it send selected value back to NR

**URL:** <https://discourse.nodered.org/t/node-red-dashboard-ui-template-custom-month-picker-how-to-make-it-send-selected-value-back-to-nr/76147>\
**Category:** Dashboard\
**Created:** [5 March 2023 15:47 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-custom-month-picker-how-to-make-it-send-selected-value-back-to-nr/76147 "2023-03-05T15:47:36Z")\
**Posts on this page:** 9\
**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:** [5 March 2023 15:47 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-custom-month-picker-how-to-make-it-send-selected-value-back-to-nr/76147/1 "2023-03-05T15:47:36Z")

</div>

I have built a template which lets chose a month and a year. I have copied the input type = month to make it. but i dont know how to make the selected value to be sent back to process the same, i read few posts which asks to add scope.send but i am unaware of how to do it, any help is appreciated.  
any changes in the method is also welcome since i need only month number and the year to generate a report for selected month/year.

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

```auto
[{"id":"43feacb623f686dd","type":"debug","z":"bd8da88de89e110d","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1770,"y":2320,"wires":[]},{"id":"d4a06909c7c81b1b","type":"ui_template","z":"bd8da88de89e110d","group":"d59e8e3909532e0c","name":"","order":1,"width":"6","height":"5","format":"<script>\nthis.scope.action = function() { return value; }\n</script>\n<label for=\"Month\">Choose Month:</label>\n\n<input type=\"month\" id=\"Month\" name=\"Month\"\n min=\"2022-07\" value=\"2022-03\">\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":1620,"y":2320,"wires":[["43feacb623f686dd"]]},{"id":"d59e8e3909532e0c","type":"ui_group","name":"MONTH_PICK","tab":"af519eb6b3377669","order":13,"disp":false,"width":"46","collapse":false,"className":""},{"id":"af519eb6b3377669","type":"ui_tab","name":"PERIOD","icon":"dashboard","order":5,"disabled":false,"hidden":false}]

```

---

<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:** [7 March 2023 10:21 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-custom-month-picker-how-to-make-it-send-selected-value-back-to-nr/76147/2 "2023-03-07T10:21:39Z")

</div>

any help appreciated....  
I am able to generate a month picker , but unable to get the selected choice back into node-red

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

```auto
[{"id":"43feacb623f686dd","type":"debug","z":"bd8da88de89e110d","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1770,"y":2320,"wires":[]},{"id":"d4a06909c7c81b1b","type":"ui_template","z":"bd8da88de89e110d","group":"d59e8e3909532e0c","name":"","order":1,"width":"6","height":"5","format":"<script>\nthis.scope.action = function() { return value; }\n</script>\n<label for=\"Month\">Choose Month:</label>\n\n<input type=\"month\" id=\"Month\" name=\"Month\"\n min=\"2022-07\" value=\"2022-03\">\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":1620,"y":2320,"wires":[["43feacb623f686dd"]]},{"id":"d59e8e3909532e0c","type":"ui_group","name":"MONTH_PICK","tab":"af519eb6b3377669","order":13,"disp":false,"width":"46","collapse":false,"className":""},{"id":"af519eb6b3377669","type":"ui_tab","name":"PERIOD","icon":"dashboard","order":5,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [7 March 2023 10:37 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-custom-month-picker-how-to-make-it-send-selected-value-back-to-nr/76147/3 "2023-03-07T10:37:18Z")

</div>

try

```auto
<script>
this.scope.action = function() { 
      var value = document.getElementById("Month").value
      return value; }
</script>
<label for="Month">Choose Month:</label>

<input type="month" id="Month" name="Month" ng-model="Month" ng-change="send({payload:action()})"
       min="2022-07" value="2022-03">

```

[edit] added getElementById()

---

<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:** [7 March 2023 11:05 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-custom-month-picker-how-to-make-it-send-selected-value-back-to-nr/76147/4 "2023-03-07T11:05:07Z")

</div>

Works Great. Thanks.

How can i pass on the min and max values from an inject / change node to the template node?

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [7 March 2023 11:14 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-custom-month-picker-how-to-make-it-send-selected-value-back-to-nr/76147/5 "2023-03-07T11:14:00Z")

</div>

```auto
<input type="month" id="Month" name="Month" ng-model="Month" ng-change="send({payload:action()})"
       min="{{msg.min}}" max="{{msg.max}}" ng-value="msg.now">

```

[edit] added ng-value

---

<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:** [7 March 2023 11:26 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-custom-month-picker-how-to-make-it-send-selected-value-back-to-nr/76147/6 "2023-03-07T11:26:33Z")

</div>

I tried but seems not working. the date picker is giving dates beyond the limits min and max set.,

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

![msg.min](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/e/3eec5c41709999a646567cb84e52ee0226faefd4.gif)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [7 March 2023 11:31 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-custom-month-picker-how-to-make-it-send-selected-value-back-to-nr/76147/7 "2023-03-07T11:31:28Z")

</div>

Working here

```auto
[{"id":"984ecc7ea17d075e","type":"inject","z":"65617ffeb779f51c","name":"","props":[{"p":"min","v":"2022-07","vt":"str"},{"p":"max","v":"2025-07","vt":"str"},{"p":"now","v":"2023-04","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":90,"y":140,"wires":[["bcd29dc2b3d0732a"]]},{"id":"bcd29dc2b3d0732a","type":"ui_template","z":"65617ffeb779f51c","group":"5192bbbc7e8927e7","name":"","order":1,"width":"6","height":"5","format":"<script>\nthis.scope.action = function() { \n var value = document.getElementById(\"Month\").value\n return value; }\n</script>\n<label for=\"Month\">Choose Month:</label>\n\n<input type=\"month\" id=\"Month\" name=\"Month\" ng-model=\"Month\" ng-change=\"send({payload:action()})\"\n min=\"{{msg.min}}\" max=\"{{msg.max}}\" ng-value=\"msg.now\">","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":240,"y":100,"wires":[["70f11affa112036d"]]},{"id":"70f11affa112036d","type":"debug","z":"65617ffeb779f51c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":390,"y":100,"wires":[]},{"id":"5192bbbc7e8927e7","type":"ui_group","name":"MONTH_PICK","tab":"af519eb6b3377669","order":13,"disp":false,"width":"46","collapse":false,"className":""},{"id":"af519eb6b3377669","type":"ui_tab","name":"PERIOD","icon":"dashboard","order":5,"disabled":false,"hidden":false}]

```

 ![image7](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/b/db65e42131da4ff5c62856ce6b310a3fa7f8dc27.jpeg)  
msg.max is set to "2025-07" as seen in example flow.  
browser chrome on android 11

---

<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:** [7 March 2023 11:37 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-custom-month-picker-how-to-make-it-send-selected-value-back-to-nr/76147/8 "2023-03-07T11:37:32Z")

</div>

_ ~~strange, i just copied the flow from your solution and deployed, it is not giving the actual limits.~~ _

scratch that.

its working, now. restarted node-red.

---

<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:** [30 March 2023 09:10 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-custom-month-picker-how-to-make-it-send-selected-value-back-to-nr/76147/10 "2023-03-30T09:10:44Z")

</div>

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