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

Dashboard
1

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

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

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

image

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

try

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

1 Like
4

Works Great. Thanks.

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

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

6

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

image

msg.min

7

Working here

[{"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
image71615Ă—666 62.3 KB

msg.max is set to "2025-07" as seen in example flow.
browser chrome on android 11

1 Like
8

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.

10

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