# Datepicker and text output on page

**URL:** <https://discourse.nodered.org/t/datepicker-and-text-output-on-page/44488>\
**Category:** Dashboard\
**Created:** [21 April 2021 08:16 UTC](https://discourse.nodered.org/t/datepicker-and-text-output-on-page/44488 "2021-04-21T08:16:42Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [21 April 2021 08:16 UTC](https://discourse.nodered.org/t/datepicker-and-text-output-on-page/44488/1 "2021-04-21T08:16:43Z")

</div>

Hi  
I have a date picker at top of page which passes to a function to parse and then to an http request for a specific logfile and then output to a text box. This all works except that the text obliterates the datepicker and also has no line breaks. I would ideally like to have the datepicker locked at the top and dynamically be able to call up formatted logfile text beneath.  
Any help much appreciated.  
thanks

---

<div class="post-metadata">

**Author:** ![meeki007](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/meeki007/32/12499_2.png) [@meeki007](https://discourse.nodered.org/u/meeki007)\
**Post date:** [22 April 2021 04:12 UTC](https://discourse.nodered.org/t/datepicker-and-text-output-on-page/44488/2 "2021-04-22T04:12:53Z")

</div>

Wow you got allot going on....

post your flow and ill take a stab at it.

I use the date picker and an hour bar to get a list of videos from the file server then post them all.  
Sounds like your doing something similar.

 ![Screenshot from 2021-03-08 22-40-20](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/4/f4a9c71eb1d0787494f433716ebf97b8ff91d917.jpeg)

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [22 April 2021 06:35 UTC](https://discourse.nodered.org/t/datepicker-and-text-output-on-page/44488/3 "2021-04-22T06:35:22Z")

</div>

```auto
[{"id":"64a45c94.4e8ba4","type":"ui_date_picker","z":"5081acab.0242b4","name":"","label":"date","group":"d22f3c53.ae693","order":1,"width":0,"height":0,"passthru":true,"topic":"topic","topicType":"msg","x":190,"y":840,"wires":[["e5a02e27.9efd7","cf6d077b.404ab8"]]},{"id":"aa6d6371.4eca7","type":"http request","z":"5081acab.0242b4","name":"","method":"GET","ret":"txt","paytoqs":"body","url":"","tls":"","persist":false,"proxy":"","authType":"","x":590,"y":840,"wires":[["d1bff695.886c68","33feb5f3.b6b58a"]]},{"id":"cf6d077b.404ab8","type":"function","z":"5081acab.0242b4","name":"","func":"var d = new Date(msg.payload);\nvar day = d.getDate();\n\nvar year = d.getFullYear();\n\n\nvar weekday = d.toLocaleString(\"default\", { weekday: \"short\" })\nvar month = d.toLocaleString('default', { month: 'short' });\n\n\nmsg.url=\"http://10.0.0.2/\"+month+\"-\"+year+\"/\"+day+\"-\"+weekday+\".log\";\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":380,"y":840,"wires":[["8ba4e513.cf0ab8","aa6d6371.4eca7"]]},{"id":"33feb5f3.b6b58a","type":"ui_text","z":"5081acab.0242b4","group":"d22f3c53.ae693","order":3,"width":"6","height":"4","name":"","label":"text","format":"{{msg.payload}}","layout":"row-left","x":770,"y":840,"wires":[]},{"id":"d22f3c53.ae693","type":"ui_group","name":"Group 1","tab":"d80c1793.249838","order":1,"disp":true,"width":6},{"id":"d80c1793.249838","type":"ui_tab","name":"Tab 4","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

```

Hi and thanks for response.  
The logfiles come from another PC on my home network and are simply short lines of info with line feeds between. As I said it works except for lack of line feeds and also that the text occupies the whole screen, overwriting the datepicker and not just the lower section.  
thanks  
John

---

<div class="post-metadata">

**Author:** ![meeki007](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/meeki007/32/12499_2.png) [@meeki007](https://discourse.nodered.org/u/meeki007)\
**Post date:** [22 April 2021 14:58 UTC](https://discourse.nodered.org/t/datepicker-and-text-output-on-page/44488/4 "2021-04-22T14:58:20Z")

</div>

can you share a log file that i can use for formatting?

If it contains sensitive info can you just make a fake one with the first 10 lines or so?

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [22 April 2021 15:14 UTC](https://discourse.nodered.org/t/datepicker-and-text-output-on-page/44488/5 "2021-04-22T15:14:49Z")

</div>

The log file is plain text I assume, remember that html will ignore \n newline. unless the text is wrapped in a `<pre> text\ntext</pre>`. or you could replace line breaks with` <br>`

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [22 April 2021 16:02 UTC](https://discourse.nodered.org/t/datepicker-and-text-output-on-page/44488/6 "2021-04-22T16:02:33Z")

</div>

Here is a small section of log at 10.xx.xx.xx/Apr-2021/16-Fri.log  
05:02:31 Gates are closed  
05:58:56 Heat water (timer) ON  
05:58:56 Boiler FIRE ON  
05:58:56 Boiler Overun FIRE ON  
05:59:07 Hot Water STAT ON  
06:34:26 Master Bedroom PIR  
07:00:00 system disarmed automatically  
07:00:01 Alarm state IDLE  
07:00:01 Time stamp 16-04-2021 @ 07:00:01  
07:00:01 security OFF  
07:30:00 Activate gates  
07:30:21 Gates are open  
07:55:29 Upper landing PIR  
07:55:44 Hall PIR  
07:55:45 Upper landing PIR  
07:55:48 Front door UNlocked

---

<div class="post-metadata">

**Author:** ![meeki007](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/meeki007/32/12499_2.png) [@meeki007](https://discourse.nodered.org/u/meeki007)\
**Post date:** [23 April 2021 00:10 UTC](https://discourse.nodered.org/t/datepicker-and-text-output-on-page/44488/7 "2021-04-23T00:10:22Z")

</div>

Note: I created the same setup your using but had to change the location for the log file to self hosting.

```auto
msg.url="http://127.0.0.1:1880/"+month+"-"+year+"/"+day+"-"+weekday+".log";

```

The issue: you have somting that looks like this.  
 ![001htm](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/1/f1def7b8dcbe5d65814aa5e81960f4ff0184f327.jpeg)

and you want it to look like this.  
 ![002htm](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/0/d0755c509c8bfcbf13b5fb2248aa852a4a5d8f51.jpeg)

A Solution: use node-red-node-ui-list / [node-red-node-ui-list (node) - Node-RED](https://flows.nodered.org/node/node-red-node-ui-list)

 ![003htm](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/7/c7f595233af136b23ca2370736fd797ec4350d14.jpeg)

```auto
[{"id":"cf6d077b.404ab8","type":"function","z":"66478148.75ea08","name":"","func":"var d = new Date(msg.payload);\nvar day = d.getDate();\n\nvar year = d.getFullYear();\n\n\nvar weekday = d.toLocaleString(\"default\", { weekday: \"short\" })\nvar month = d.toLocaleString('default', { month: 'short' });\n\n\nmsg.url=\"http://127.0.0.1:1880/\"+month+\"-\"+year+\"/\"+day+\"-\"+weekday+\".log\";\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":560,"y":200,"wires":[["aa6d6371.4eca7"]]},{"id":"64a45c94.4e8ba4","type":"ui_date_picker","z":"66478148.75ea08","name":"","label":"date","group":"d22f3c53.ae693","order":1,"width":"6","height":"2","passthru":true,"topic":"topic","topicType":"msg","x":430,"y":200,"wires":[["cf6d077b.404ab8"]]},{"id":"6864b41d.effb24","type":"http in","z":"66478148.75ea08","name":"","url":"/Apr-2021/16-Fri.log","method":"get","upload":false,"swaggerDoc":"","x":490,"y":160,"wires":[["22a99532.e26c3a"]]},{"id":"22a99532.e26c3a","type":"file in","z":"66478148.75ea08","name":"","filename":"./Apr-2021/16-Fri.log","format":"utf8","chunk":false,"sendError":false,"encoding":"none","x":720,"y":160,"wires":[["1893730a.5a1ca5"]]},{"id":"40380c82.b41b6c","type":"http response","z":"66478148.75ea08","name":"","x":1050,"y":160,"wires":[]},{"id":"1893730a.5a1ca5","type":"change","z":"66478148.75ea08","name":"Set Headers","rules":[{"t":"set","p":"headers","pt":"msg","to":"{}","tot":"json"},{"t":"set","p":"headers.content-type","pt":"msg","to":"text/plain","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":910,"y":160,"wires":[["40380c82.b41b6c"]]},{"id":"aa6d6371.4eca7","type":"http request","z":"66478148.75ea08","name":"","method":"GET","ret":"txt","paytoqs":"body","url":"","tls":"","persist":false,"proxy":"","authType":"","x":730,"y":200,"wires":[["9d56df6d.20b8a8"]]},{"id":"3fb3b22b.a90cb6","type":"ui_list","z":"66478148.75ea08","group":"d22f3c53.ae693","name":"","order":2,"width":"6","height":"5","lineType":"one","actionType":"none","allowHTML":true,"outputs":0,"topic":"","x":1110,"y":200,"wires":[]},{"id":"9d56df6d.20b8a8","type":"split","z":"66478148.75ea08","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":870,"y":200,"wires":[["28b2b093.41914"]]},{"id":"28b2b093.41914","type":"join","z":"66478148.75ea08","name":"","mode":"custom","build":"array","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":false,"timeout":"","count":"","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":990,"y":200,"wires":[["3fb3b22b.a90cb6"]]},{"id":"d22f3c53.ae693","type":"ui_group","name":"Group 1","tab":"d80c1793.249838","order":1,"disp":true,"width":6},{"id":"d80c1793.249838","type":"ui_tab","name":"LogFileTest","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

```

So the issue is caused by having a list of text too long based on the size you use for the ui-text node.  
There are many solutions to this. if you know how big it will be you can just set the size.

1. Create a template node and use a scroll bar
2. function node and use the   
 to replace the /n but it will still overrun
3. format it to use the ui-table node and create a array of objects
4. etc etc.

I chose the quickest and easiest way in my mind to do it.

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [23 April 2021 08:10 UTC](https://discourse.nodered.org/t/datepicker-and-text-output-on-page/44488/8 "2021-04-23T08:10:09Z")

</div>

Thank you so much for taking the time. I wasn't aware if ui list but it all works great now. Next bit is to trap all the http trash when I select a file that doesn't exist. Not important though.  
thanks again  
John  
PS fantastic forum.

---

<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:** [23 May 2021 08:10 UTC](https://discourse.nodered.org/t/datepicker-and-text-output-on-page/44488/9 "2021-05-23T08:10:12Z")

</div>

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