How to create timepicker ?

[KariVii]

Hi!

I'm trying to create timepicker like this http://mgcrea.github.io/angular-strap/#/timepickers or even simpler like this http://ngmodules.org/modules/angular-smart-timepicker using template node.

But I could not figure out how I get those working? I am just learning javascript and Angular so I don't have very much knowledge about where to put all css and js files.

BR Kari 

[KariVii]

Hi!

Replying to my own message. I have done following simple date and time picker.

[{"id":"7e1471b6.81eb9","type":"ui_tab","z":"2014e418.dfeb1c","name":"Home","icon":"dashboard","order":"1"},{"id":"a6c99675.593668","type":"debug","z":"2014e418.dfeb1c","name":"","active":true,"console":"false","complete":"true","x":393,"y":1965,"wires":[]},{"id":"bdb8091.f4247f8","type":"ui_template","z":"2014e418.dfeb1c","tab":"7e1471b6.81eb9","name":"","group":"","order":1,"format":"<script>\n\n(function(scope) {\n    var value= new Date(2010, 11, 28, 14, 57);\n    scope.send({payload:value});\n});\n</script>\n<div>\n   {{value}}<br>\n   <br>\n      <input ng-model=\"value\" ng-change=\"send(value)\" type=\"datetime-local\" placeholder=\"HH:mm\" min=\"00:00\" max=\"23:59\" required >\n </div>\n","storeOutMessages":true,"fwdInMessages":true,"x":163,"y":2003,"wires":[["a6c99675.593668"]]}]

But I have following problems: How I could set preset date and time? When I change UI pages this timepicker losts its state. I need to preserve set values and load date and time settings from file.

Could someone help me?

BR Kari

[Steven Daglish]

Sorry, not much help, but I've tried your example and have been unable to create a default value yet (tried a few things, but nothing seemed to work).

Hope someone comes up with an answer as this would be useful feature in my own projects.

Steven

[Johnpaul Adams]

Good Afternoon!

I've managed to 'preset' the time and date using the following:-

[{"id":"3b46f035.76213","type":"ui_tab","z":"98149326.2c6b2","name":"Test","icon":"dashboard","order":"1"},{"id":"825e02f1.6755e","type":"debug","z":"98149326.2c6b2","name":"","active":true,"console":"false","complete":"true","x":577,"y":505,"wires":[]},{"id":"7d2fd485.5cd5ac","type":"ui_template","z":"98149326.2c6b2","tab":"3b46f035.76213","name":"","group":"2","order":1,"format":"<script>\n(function(scope) {\n    scope.$watch('msg.payload', function (v) {\n         if (!v) scope.msg ={ value: new Date(1970, 0, 1, 14, 34, 0) };\n    });\n})(scope);\n</script>\n<div>\n   {{msg.value}}<br>\n   <br>\n      <input ng-model=\"msg.value\" ng-change=\"send(msg.value)\" type=\"datetime-local\" placeholder=\"HH:mm\" min=\"00:00\" max=\"23:59\" required >\n </div>\n","storeOutMessages":true,"fwdInMessages":true,"x":419,"y":505,"wires":[["825e02f1.6755e"]]}]

But if you trying changing the value, it reverts back to the original eventually. I've tried to sort this issue but I'm completely new to AngularJS and Node-Red so I'm baffled at the moment.

Just thought I'd share this and hopefully someone could improve it.

John.