# How do you set time picker input using variables?

**URL:** <https://discourse.nodered.org/t/how-do-you-set-time-picker-input-using-variables/14117>\
**Category:** Dashboard\
**Created:** [7 August 2019 21:38 UTC](https://discourse.nodered.org/t/how-do-you-set-time-picker-input-using-variables/14117 "2019-08-07T21:38:27Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![dbrownpu](https://avatars.discourse-cdn.com/v4/letter/d/8e7dd6/32.png) [@dbrownpu](https://discourse.nodered.org/u/dbrownpu)\
**Post date:** [7 August 2019 21:38 UTC](https://discourse.nodered.org/t/how-do-you-set-time-picker-input-using-variables/14117/1 "2019-08-07T21:38:27Z")

</div>

Looking for some help setting up some sprinkler control. I have a time input in my dashboard that I found some code for [here](https://groups.google.com/forum/#!topic/node-red-contrib-ui/Y_YgQL0A2vg) but it is set to auto populate with the current time at boot instead of a predetermined time. I'd like to be able to restore a saved time either from a global tag or from the incoming msg.

I can get the msg.payloads to display fine on the HTML but I'm at a loss on getting them to come into the AngularJS that was written and be used as variables to set the time.

My flow is below.  
I use a function to send the two values for hour and minute in the payload. The references to global values in the function is just testing the retrieval until I complete the other functions then it will be moved out.

```auto
[{"id":"11c8f1d6.78ca2e","type":"debug","z":"94205f68.401b1","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":770,"y":140,"wires":[]},{"id":"277b3af9.858fb6","type":"ui_template","z":"94205f68.401b1","group":"e8d64e7b.014638","name":"Start Time","order":1,"width":0,"height":0,"format":"<div>\n Start Time:\n <input type=\"time\" ng-model=\"usr_time\"> \n\n <button ng-click=\"settime()\">Set time</button>\n <br>\n <p id=\"new_time\">{{usr_time | date:'HH:mm'}}</p> <!-- would like to remove this code but it won't export payload if it's removed -->\n <!-- can extract payload data below in HTML but that does me no good. Need the data in the script and don't care for it to be displayed on screen -->\n <data id=\"starthr\">{{msg.payload[\"starthr\"]}}</data>\n <data id=\"startmin\">{{msg.payload[\"startmin\"]}}</data>\n</div>\n\n<script>\n\n(function($scope) {\n \n var now = new Date();\n //var starthr = 5; manually set variable as a test\n //var startmin = 30; manually set variable as a test\n $scope.usr_time = new Date(1970, 0, 1, now.getHours(), now.getMinutes(), 0);\n //$scope.usr_time = new Date(1970, 0, 1, starthr, startmin, 0); would like to use code like this but need to extract values from either global variable or incoming payload\n\n $scope.settime = function() {\n var time = document.getElementById(\"new_time\");\n $scope.send({payload: time.innerText});\n };\n})(scope);\n\n</script>\n","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":590,"y":140,"wires":[["11c8f1d6.78ca2e"]]},{"id":"53d3e914.e398","type":"function","z":"94205f68.401b1","name":"Set Payload variables","func":"global.set('starttimehr',6);\nglobal.set('starttimemin',30);\n\nvar starthr = global.get('starttimehr');\nvar startmin = global.get('starttimemin');\nmsg.topic = \"Start Time\"\nmsg.payload = { \n \"starthr\" : starthr,\n \"startmin\" : startmin\n}\nreturn msg;","outputs":1,"noerr":0,"x":380,"y":140,"wires":[["277b3af9.858fb6"]]},{"id":"a9a940d1.72a0f8","type":"inject","z":"94205f68.401b1","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":150,"y":140,"wires":[["53d3e914.e398"]]},{"id":"e8d64e7b.014638","type":"ui_group","z":"","name":"Sprinkler Timer","tab":"c1f761fa.d1df78","order":1,"disp":true,"width":"6","collapse":false},{"id":"c1f761fa.d1df78","type":"ui_tab","z":"","name":"Sprinkler","icon":"dashboard","order":1}]

```