Nodered offline and i need to use date time range picker from dashboard ui

[bertaud]

I m in a nodered server without inernet connexion (requirement).

I wan t to set up date time range picker in my nodered dashboard
https://www.daterangepicker.com/

I have tried date time range picker package with internet connexion first
it works fine when i have an internet connexion.

Trying to set up without internet connexion . But doesn't succeed to do it

I there someone which succeed to set up it ?

[Steve-Mcl]

If you are using the CDNs then no, it wont work without internet.

You would need to host the files (listed below) on your node-red server and either host them via...
-- HTTP endpoints
or
-- the httpStatic setting

• https://cdn.jsdelivr.net/momentjs/latest/moment.min.js
• https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js
• https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css

Then in your script instead of the internet references, use your node-red endpoint reference

e.g.

<script type="text/javascript" src="static/moment.min.js"></script>
<script type="text/javascript" src="static/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/daterangepicker.css" />

[bertaud]

i have seen this post and try to set up with http endpoint method but don't succeed to it
have you an example of flow to share to help to understand?

[bertaud]

i succeed with httpendpoint to serve the 3 file moment.min.js, daterangepicker.min.js and daterangepicker.css

The 3 files are exactly the same as

https://cdn.jsdelivr.net/momentjs/latest/moment.min.js
https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js
https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css

But result is note the same
with nodered connected and cdn on line everything is fine
with nodered without internet and serve of 3 files i can observe the date time range is display on my pas but as soon as i click on the date the display of calendar is not done below but in bot left of the page and date selection is not possible
i can change only the hours

[davidz]

Does your node-RED server has a RTC (Real Time Clock) and a cell battery?
It is necessary for the server to have a RTC running if there is no internet connection to provide correct date/time information.

[Steve-Mcl]

Share your flow and I will take a look.

(use CTRL+E to export)

[bertaud]

this my flow
[{"id":"022a6e1c03cf7832","type":"tab","label":"test","disabled":false,"info":""},{"id":"970fb164b8a6a1f0","type":"http response","z":"022a6e1c03cf7832","name":"","statusCode":"","headers":{},"x":950,"y":180,"wires":},{"id":"964621b084bfc81e","type":"debug","z":"022a6e1c03cf7832","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":370,"y":360,"wires":},{"id":"dc89ea8097a5e40f","type":"file in","z":"022a6e1c03cf7832","name":"/data/cdndeliver/moment.min.js","filename":"/data/cdndeliver/moment.min.js","format":"utf8","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":570,"y":180,"wires":[["970fb164b8a6a1f0"]]},{"id":"c8a2235053c4c996","type":"comment","z":"022a6e1c03cf7832","name":"","info":"works fine\n\n<script type="text/javascript" src=https://cdn.jsdelivr.net/momentjs/latest/moment.min.js>\n<script type="text/javascript" src=https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js>\n<link rel="stylesheet" type="text/css" href=https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css />\n\n\ndoesn't works fine\n<script type="text/javascript" src=https://aae5a1f2444fe4acd910b7d683f51c99-379632925.eu-west-3.elb.amazonaws.com/static/moment.min.js>\n<script type="text/javascript" src=https://aae5a1f2444fe4acd910b7d683f51c99-379632925.eu-west-3.elb.amazonaws.com/static/daterangepicker.min.js>\n<link rel="stylesheet" type="text/css" href=https://aae5a1f2444fe4acd910b7d683f51c99-379632925.eu-west-3.elb.amazonaws.com/static/daterangepicker.css />\n","x":170,"y":40,"wires":},{"id":"ed470a61f3f1c190","type":"ui_template","z":"022a6e1c03cf7832","group":"649dbd4e1bb540c3","name":"HEAD scripts and css","order":1,"width":0,"height":0,"format":"\n<script type="text/javascript" src="https://aae5a1f2444fe4acd910b7d683f51c99-379632925.eu-west-3.elb.amazonaws.com/static/moment.min.js">\n<script type="text/javascript" src="https://aae5a1f2444fe4acd910b7d683f51c99-379632925.eu-west-3.elb.amazonaws.com/static/daterangepicker.min.js">\n<link rel="stylesheet" type="text/css" href="https://aae5a1f2444fe4acd910b7d683f51c99-379632925.eu-west-3.elb.amazonaws.com/static/daterangepicker.css" />","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":210,"y":100,"wires":[]},{"id":"0f748c0efdef3c76","type":"http in","z":"022a6e1c03cf7832","name":"Http endpoint moment.min.js","url":"static/moment.min.js","method":"get","upload":false,"swaggerDoc":"","x":220,"y":180,"wires":[["dc89ea8097a5e40f"]]},{"id":"b9c7f58814273a6f","type":"http response","z":"022a6e1c03cf7832","name":"","statusCode":"","headers":{},"x":970,"y":240,"wires":},{"id":"36ff5c1734675a32","type":"file in","z":"022a6e1c03cf7832","name":"/data/cdndeliver/daterangepicker.min.js","filename":"/data/cdndeliver/daterangepicker.min.js","format":"utf8","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":630,"y":240,"wires":[["b9c7f58814273a6f"]]},{"id":"cd746e0df8e42cb2","type":"http in","z":"022a6e1c03cf7832","name":"Http endpoint daterangepicker.min.js","url":"static/daterangepicker.min.js","method":"get","upload":false,"swaggerDoc":"","x":240,"y":240,"wires":[["36ff5c1734675a32"]]},{"id":"a5e6418245629227","type":"http response","z":"022a6e1c03cf7832","name":"","statusCode":"","headers":{},"x":970,"y":300,"wires":},{"id":"221f9e379860c173","type":"file in","z":"022a6e1c03cf7832","name":"/data/cdndeliver/daterangepicker.css","filename":"/data/cdndeliver/daterangepicker.css","format":"utf8","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":610,"y":300,"wires":[["a5e6418245629227"]]},{"id":"8567c8814ca56274","type":"http in","z":"022a6e1c03cf7832","name":"Http endpoint daterangepicker.css","url":"static/daterangepicker.css","method":"get","upload":false,"swaggerDoc":"","x":240,"y":300,"wires":[["221f9e379860c173"]]},{"id":"a76be038e43c6726","type":"ui_template","z":"022a6e1c03cf7832","group":"649dbd4e1bb540c3","name":"","order":0,"width":0,"height":0,"format":"\n<input type="text" id="daterange1" />\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":160,"y":360,"wires":[["964621b084bfc81e"]]},{"id":"649dbd4e1bb540c3","type":"ui_group","name":"test","tab":"dea82b7abb96e026","order":3,"disp":true,"width":"28","collapse":false},{"id":"dea82b7abb96e026","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

the problem i face is a problem of display

[Steve-Mcl]

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)

``` 
   code goes here 
```

You can edit and correct your post by clicking the pencil icon.

See this post for more details - How to share code or flow json

[bertaud]

[{"id":"022a6e1c03cf7832","type":"tab","label":"test","disabled":false,"info":""},{"id":"970fb164b8a6a1f0","type":"http response","z":"022a6e1c03cf7832","name":"","statusCode":"","headers":{},"x":950,"y":180,"wires":[]},{"id":"964621b084bfc81e","type":"debug","z":"022a6e1c03cf7832","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":370,"y":360,"wires":[]},{"id":"dc89ea8097a5e40f","type":"file in","z":"022a6e1c03cf7832","name":"/data/cdndeliver/moment.min.js","filename":"/data/cdndeliver/moment.min.js","format":"utf8","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":570,"y":180,"wires":[["970fb164b8a6a1f0"]]},{"id":"c8a2235053c4c996","type":"comment","z":"022a6e1c03cf7832","name":"","info":"works fine\n\n<script type=\"text/javascript\" src=https://cdn.jsdelivr.net/momentjs/latest/moment.min.js></script>\n<script type=\"text/javascript\" src=https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js></script>\n<link rel=\"stylesheet\" type=\"text/css\" href=https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css />\n\n\ndoesn't works fine\n<script type=\"text/javascript\" src=https://aae5a1f2444fe4acd910b7d683f51c99-379632925.eu-west-3.elb.amazonaws.com/static/moment.min.js></script>\n<script type=\"text/javascript\" src=https://aae5a1f2444fe4acd910b7d683f51c99-379632925.eu-west-3.elb.amazonaws.com/static/daterangepicker.min.js></script>\n<link rel=\"stylesheet\" type=\"text/css\" href=https://aae5a1f2444fe4acd910b7d683f51c99-379632925.eu-west-3.elb.amazonaws.com/static/daterangepicker.css />\n","x":170,"y":40,"wires":[]},{"id":"ed470a61f3f1c190","type":"ui_template","z":"022a6e1c03cf7832","group":"649dbd4e1bb540c3","name":"HEAD scripts and css","order":1,"width":0,"height":0,"format":"\n<script type=\"text/javascript\" src=\"https://aae5a1f2444fe4acd910b7d683f51c99-379632925.eu-west-3.elb.amazonaws.com/static/moment.min.js\"></script>\n<script type=\"text/javascript\" src=\"https://aae5a1f2444fe4acd910b7d683f51c99-379632925.eu-west-3.elb.amazonaws.com/static/daterangepicker.min.js\"></script>\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://aae5a1f2444fe4acd910b7d683f51c99-379632925.eu-west-3.elb.amazonaws.com/static/daterangepicker.css\" />","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":210,"y":100,"wires":[[]]},{"id":"0f748c0efdef3c76","type":"http in","z":"022a6e1c03cf7832","name":"Http endpoint  moment.min.js","url":"static/moment.min.js","method":"get","upload":false,"swaggerDoc":"","x":220,"y":180,"wires":[["dc89ea8097a5e40f"]]},{"id":"b9c7f58814273a6f","type":"http response","z":"022a6e1c03cf7832","name":"","statusCode":"","headers":{},"x":970,"y":240,"wires":[]},{"id":"36ff5c1734675a32","type":"file in","z":"022a6e1c03cf7832","name":"/data/cdndeliver/daterangepicker.min.js","filename":"/data/cdndeliver/daterangepicker.min.js","format":"utf8","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":630,"y":240,"wires":[["b9c7f58814273a6f"]]},{"id":"cd746e0df8e42cb2","type":"http in","z":"022a6e1c03cf7832","name":"Http endpoint  daterangepicker.min.js","url":"static/daterangepicker.min.js","method":"get","upload":false,"swaggerDoc":"","x":240,"y":240,"wires":[["36ff5c1734675a32"]]},{"id":"a5e6418245629227","type":"http response","z":"022a6e1c03cf7832","name":"","statusCode":"","headers":{},"x":970,"y":300,"wires":[]},{"id":"221f9e379860c173","type":"file in","z":"022a6e1c03cf7832","name":"/data/cdndeliver/daterangepicker.css","filename":"/data/cdndeliver/daterangepicker.css","format":"utf8","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":610,"y":300,"wires":[["a5e6418245629227"]]},{"id":"8567c8814ca56274","type":"http in","z":"022a6e1c03cf7832","name":"Http endpoint daterangepicker.css","url":"static/daterangepicker.css","method":"get","upload":false,"swaggerDoc":"","x":240,"y":300,"wires":[["221f9e379860c173"]]},{"id":"a76be038e43c6726","type":"ui_template","z":"022a6e1c03cf7832","group":"649dbd4e1bb540c3","name":"","order":0,"width":0,"height":0,"format":"\n<input type=\"text\" id=\"daterange1\" />\n\n<script>\n    \n    const scope = this.scope;\n    $('#daterange1').daterangepicker({\n        timePicker: true,\n        locale: {\n            format: 'YYYY-MM-DD hh:mm A'\n        }\n    });\n    $('#daterange1').on('apply.daterangepicker', function(ev, picker) {\n        let payload = {};\n        payload.startDate = picker.startDate.format('YYYY-MM-DD');\n        payload.endDate = picker.endDate.format('YYYY-MM-DD');\n        payload.startTime = picker.startDate.format('HH:mm:ss');\n        payload.endTime = picker.endDate.format('HH:mm:ss');\n        scope.send({payload:payload});\n    });\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":160,"y":360,"wires":[["964621b084bfc81e"]]},{"id":"649dbd4e1bb540c3","type":"ui_group","name":"test","tab":"dea82b7abb96e026","order":3,"disp":true,"width":"28","collapse":false},{"id":"dea82b7abb96e026","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

[bertaud]

[bertaud]

working case
Following legacy lines pin UI template node
3 first line is the working case with legacy code
3 next line is the not working case with my endpoint

<script type="text/javascript" src=https://cdn.jsdelivr.net/momentjs/latest/moment.min.js></script>
<script type="text/javascript" src=https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js></script>
<link rel="stylesheet" type="text/css" href=https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css />



<script type="text/javascript" src=https://aae5a1f2444fe4acd910b7d683f51c99-379632925.eu-west-3.elb.amazonaws.com/static/moment.min.js></script>
<script type="text/javascript" src=https://aae5a1f2444fe4acd910b7d683f51c99-379632925.eu-west-3.elb.amazonaws.com/static/daterangepicker.min.js></script>
<link rel="stylesheet" type="text/css" href=https://aae5a1f2444fe4acd910b7d683f51c99-379632925.eu-west-3.elb.amazonaws.com/static/daterangepicker.css />

[bertaud]

i succeed to do it working adding and edit change node to set correct correct header before to send response from http endpoint
Thanks for help