# Format dashboard text input time seconds

**URL:** <https://discourse.nodered.org/t/format-dashboard-text-input-time-seconds/37664>\
**Category:** Dashboard\
**Created:** [17 December 2020 17:52 UTC](https://discourse.nodered.org/t/format-dashboard-text-input-time-seconds/37664 "2020-12-17T17:52:07Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![msmiha](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/msmiha/32/33273_2.png) [@msmiha](https://discourse.nodered.org/u/msmiha)\
**Post date:** [17 December 2020 17:52 UTC](https://discourse.nodered.org/t/format-dashboard-text-input-time-seconds/37664/1 "2020-12-17T17:52:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![msmiha](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/msmiha/32/33273_2.png) [@msmiha](https://discourse.nodered.org/u/msmiha)\
**Post date:** [21 December 2020 21:04 UTC](https://discourse.nodered.org/t/format-dashboard-text-input-time-seconds/37664/2 "2020-12-21T21:04:22Z")

</div>

Hi,

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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [22 December 2020 07:32 UTC](https://discourse.nodered.org/t/format-dashboard-text-input-time-seconds/37664/3 "2020-12-22T07:32:44Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![msmiha](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/msmiha/32/33273_2.png) [@msmiha](https://discourse.nodered.org/u/msmiha)\
**Post date:** [22 December 2020 19:10 UTC](https://discourse.nodered.org/t/format-dashboard-text-input-time-seconds/37664/4 "2020-12-22T19:10:35Z")

</div>

Hi,

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/f/8fc4a71a11b7ef6ca2874119d738578ba9023e92.png)

Seconds should in both cases read 20

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [22 December 2020 20:47 UTC](https://discourse.nodered.org/t/format-dashboard-text-input-time-seconds/37664/5 "2020-12-22T20:47:49Z")

</div>

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?

 ![ASoLL7919G](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/3/c3070e358cba09a2fd423de0bc36d040342e1078.gif)

Demo flow...

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

```

---

<div class="post-metadata">

**Author:** ![msmiha](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/msmiha/32/33273_2.png) [@msmiha](https://discourse.nodered.org/u/msmiha)\
**Post date:** [22 December 2020 21:42 UTC](https://discourse.nodered.org/t/format-dashboard-text-input-time-seconds/37664/6 "2020-12-22T21:42:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [22 December 2020 21:50 UTC](https://discourse.nodered.org/t/format-dashboard-text-input-time-seconds/37664/7 "2020-12-22T21:50:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![msmiha](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/msmiha/32/33273_2.png) [@msmiha](https://discourse.nodered.org/u/msmiha)\
**Post date:** [27 December 2020 17:12 UTC](https://discourse.nodered.org/t/format-dashboard-text-input-time-seconds/37664/8 "2020-12-27T17:12:16Z")

</div>

I had managed to come up with this code:

```auto
<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:

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

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [26 January 2021 17:12 UTC](https://discourse.nodered.org/t/format-dashboard-text-input-time-seconds/37664/9 "2021-01-26T17:12:16Z")

</div>

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