Format dashboard text input time seconds

[msmiha]

Hi,

I'm looking for a way to format text input in time mode to display seconds. As I understand for this I would need to add attribute step="1" to input. So the code should look like this:

<input type="time" step="1" ng-change="me.valueChanged(300)" ng-model="timeInput">

is there a way to change default step="any" to step="1"?

Regards

[msmiha]

Hi,

What I had found out is that if I use ui_template node and add attribute step to inputs of type time:

<script>
    $("input[type='time']").attr('step', 1);
</script>

the display is working and showing also seconds, but they are always 00. It looks like code behind is not working correctly.

[Steve-Mcl]

If you execute $("input[type='time']").attr('step',1) in the browser console manually, does it work?

Was the ui-template set for head mode?

Maybe you need to delay the code (like set timeout or on document ready or angular equivalent)

[msmiha]

Hi,

If I execute the code in the browser manually it also does not work. The seconds stay to 00.

Seconds should in both cases read 20

[Steve-Mcl]

Adding attribute step does not affect the value or format of an input. It affects what happens when you use the arrows to adjust the time.

TBH, I am not 100% certain what you are trying to do.

Does this help?

Demo flow...

[{"id":"7c5c3d40.626854","type":"ui_template","z":"5f3f2677.c5a0d8","group":"a9584ee2.24eac","name":"","order":1,"width":"8","height":"1","format":"<!-- INSTRUCTIONS...\n* Add as many time inputs as required\n* Set the data-topic attribute unique on each time input\n* When you need to set time from node-red, set the topic to match and the payload to a time string \n* When this node transmits to node-red, the topic will be set to the data-topic you entered\n-->\n\n<div>\n    <label> <span style=\"width: 100px\">Start </span>\n        <input data-topic=\"start\" \n            class=\"my-time\" type=\"time\"  step=\"1\" > \n    </lable>\n    <label> <span style=\"width: 100px\">End </span>  \n        <input data-topic=\"end\" \n            class=\"my-time\" type=\"time\"  step=\"1\" >\n    </lable>\n</div>\n\n<script>\n    (function(scope) {\n        console.log(\"in scope\")\n\n        scope.$watch('msg', function(msg) {\n            if (msg && msg.topic) {\n                var timeInput = $('.my-time[data-topic=\"'+msg.topic+'\"]' );\n                timeInput.text(msg.payload);\n                timeInput.val(msg.payload);\n            }\n        });\n        $('.my-time').change(function(e) {\n            var $this = $(this);\n            var pl = $this.val();\n            var tp = $this.data(\"topic\");\n            scope.send({topic: tp, payload: pl})\n        })\n    })(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":260,"y":540,"wires":[["99a3aef7.c02d9","2db29788.fe97b8"]]},{"id":"ac897c5b.4e01b","type":"inject","z":"5f3f2677.c5a0d8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"start","payload":"09:05:30","payloadType":"str","x":90,"y":520,"wires":[["7c5c3d40.626854"]]},{"id":"99a3aef7.c02d9","type":"debug","z":"5f3f2677.c5a0d8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":410,"y":540,"wires":[]},{"id":"d19c063a.ce1d48","type":"inject","z":"5f3f2677.c5a0d8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"end","payload":"09:15:00","payloadType":"str","x":90,"y":560,"wires":[["7c5c3d40.626854"]]},{"id":"50af8142.7d6de","type":"ui_text","z":"5f3f2677.c5a0d8","group":"a9584ee2.24eac","order":3,"width":"8","height":"1","name":"","label":"Start time entered","format":"{{msg.payload}}","layout":"row-spread","x":330,"y":600,"wires":[]},{"id":"2db29788.fe97b8","type":"switch","z":"5f3f2677.c5a0d8","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"start","vt":"str"},{"t":"eq","v":"end","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":150,"y":620,"wires":[["50af8142.7d6de"],["d459f6f5.b02e48"]]},{"id":"d459f6f5.b02e48","type":"ui_text","z":"5f3f2677.c5a0d8","group":"a9584ee2.24eac","order":4,"width":"8","height":"1","name":"","label":"End time entered","format":"{{msg.payload}}","layout":"row-spread","x":330,"y":640,"wires":[]},{"id":"a9584ee2.24eac","type":"ui_group","name":"Rulliere","tab":"a4cbd78a.6d5d68","order":1,"disp":true,"width":"8","collapse":false},{"id":"a4cbd78a.6d5d68","type":"ui_tab","name":"Cantiere","icon":"dashboard","disabled":false,"hidden":false}]

[msmiha]

Hey Steve-Mcl,

thank you for that. This almost solves my problem. What I would need to do is that ui_template code would work in the same way that does normal text input set to the mode time. This means that ui_template should expect payload of type number not string, and should also return the number. This number shoould be the miliseconds from midnight. Realy thank you for this advice.

[Steve-Mcl]

The problem with sending an epoch is there is no date component. But I'm sure you can work around that to suit your needs.

[msmiha]

I had managed to come up with this code:

<md-input-container>
    <label>ON time</label>
    <input type="time" ng-model="OnTime" step="1" ng-change="onTimeValueChanged()">
</md-input-container>


<script>
    (function(scope) {
        scope.$watch('msg', function(msg) {
            var d = new Date();
            d.setTime(msg.payload);
            scope.OnTime = d;
        });
        scope.onTimeValueChanged = function onTimeValueChanged() {
            scope.send({payload: scope.OnTime.getTime()});
        }
    })(scope);
</script>

It does exactly what I need to, but the problem is that time is now formatted in my time zone (GMT+1) and not in UTC. This means when I'll input time EPOCH of 0, the time picker will show 1:00:00. Does anyone have a solution for that?

Here is the full flow:

[{"id":"b57c3a4d.b4ba68","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"e5ea476b.7210b8","type":"inject","z":"b57c3a4d.b4ba68","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":260,"y":320,"wires":[["54b3edb0.003c04"]]},{"id":"54b3edb0.003c04","type":"ui_template","z":"b57c3a4d.b4ba68","group":"9e990ee6.a6b1","name":"","order":0,"width":0,"height":0,"format":"<md-input-container>\n    <label>ON time</label>\n    <input type=\"time\" ng-model=\"OnTime\" step=\"1\" ng-change=\"onTimeValueChanged()\">\n</md-input-container>\n\n\n<script>\n    (function(scope) {\n        scope.$watch('msg', function(msg) {\n            var d = new Date();\n            d.setTime(msg.payload);\n            scope.OnTime = d;\n        });\n        scope.onTimeValueChanged = function onTimeValueChanged() {\n            scope.send({payload: scope.OnTime.getTime()});\n        }\n    })(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":560,"y":200,"wires":[["88654a1d.971718"]]},{"id":"d2595ac6.2ef818","type":"inject","z":"b57c3a4d.b4ba68","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"120000","payloadType":"num","x":260,"y":200,"wires":[["54b3edb0.003c04"]]},{"id":"88654a1d.971718","type":"debug","z":"b57c3a4d.b4ba68","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":800,"y":200,"wires":[]},{"id":"ac683bec.fba3d8","type":"inject","z":"b57c3a4d.b4ba68","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"60000","payloadType":"num","x":250,"y":260,"wires":[["54b3edb0.003c04"]]},{"id":"9e990ee6.a6b1","type":"ui_group","z":"","name":"Osvetlitev HTML","tab":"33440cb5.bb2554","order":2,"disp":true,"width":"6","collapse":false},{"id":"33440cb5.bb2554","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":1}]