Hey @ozpos have you tried just using the browsers built in time picker?
the html is...
<input type="time" id="mytime" >
looks like this in chrome desktop...
And looks like this in a mobile...
Demo flow that sends the selected value back to node-red...
[{"id":"8e64b44c.2f7cc8","type":"ui_template","z":"42ea7bd7.2e3c24","group":"dce9e7a2.d20c78","name":"","order":5,"width":"7","height":"2","format":"<div>\n <input type=\"time\" id=\"timeFrom\" class=\"timepicker\" >\n <input type=\"time\" id=\"timeTo\" class=\"timepicker\" >\n</div>\n\n<script>\n(function(scope) {\n var timepicker = $(\".timepicker\")\n timepicker.on('change', function(evt) {\n scope.send({ topic: this.id, payload: this.value });\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":420,"y":580,"wires":[["cc14d877.0648c8"]]},{"id":"e1f2906e.5967f","type":"debug","z":"42ea7bd7.2e3c24","name":"","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":750,"y":557,"wires":[]},{"id":"cc14d877.0648c8","type":"switch","z":"42ea7bd7.2e3c24","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"timeFrom","vt":"str"},{"t":"eq","v":"timeTo","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":570,"y":580,"wires":[["e1f2906e.5967f"],["77d33f4b.d5cd7"]]},{"id":"77d33f4b.d5cd7","type":"debug","z":"42ea7bd7.2e3c24","name":"","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":750,"y":604,"wires":[]},{"id":"dce9e7a2.d20c78","type":"ui_group","name":"Object detection","tab":"5132060d.4cde48","order":1,"disp":true,"width":"7","collapse":false},{"id":"5132060d.4cde48","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
