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

**URL:** <https://discourse.nodered.org/t/nodered-offline-and-i-need-to-use-date-time-range-picker-from-dashboard-ui/60775>\
**Category:** Dashboard\
**Tags:** http-request\
**Created:** [4 April 2022 14:01 UTC](https://discourse.nodered.org/t/nodered-offline-and-i-need-to-use-date-time-range-picker-from-dashboard-ui/60775 "2022-04-04T14:01:03Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![bertaud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bertaud/32/80981_2.png) [@bertaud](https://discourse.nodered.org/u/bertaud)\
**Post date:** [4 April 2022 14:01 UTC](https://discourse.nodered.org/t/nodered-offline-and-i-need-to-use-date-time-range-picker-from-dashboard-ui/60775/1 "2022-04-04T14:01:03Z")

</div>

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/](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 ?

---

<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:** [4 April 2022 16:31 UTC](https://discourse.nodered.org/t/nodered-offline-and-i-need-to-use-date-time-range-picker-from-dashboard-ui/60775/2 "2022-04-04T16:31:35Z")

</div>

If you are using the [CDN](https://www.cloudflare.com/en-gb/learning/cdn/what-is-a-cdn/)s 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 endpoint](https://cookbook.nodered.org/http/serve-a-local-file)s  
**or**  
-- the [`httpStatic`](https://nodered.org/docs/user-guide/runtime/configuration#runtime-configuration) 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.

```auto
<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" />

```

---

<div class="post-metadata">

**Author:** ![bertaud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bertaud/32/80981_2.png) [@bertaud](https://discourse.nodered.org/u/bertaud)\
**Post date:** [4 April 2022 16:46 UTC](https://discourse.nodered.org/t/nodered-offline-and-i-need-to-use-date-time-range-picker-from-dashboard-ui/60775/3 "2022-04-04T16:46:06Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![bertaud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bertaud/32/80981_2.png) [@bertaud](https://discourse.nodered.org/u/bertaud)\
**Post date:** [5 April 2022 14:47 UTC](https://discourse.nodered.org/t/nodered-offline-and-i-need-to-use-date-time-range-picker-from-dashboard-ui/60775/4 "2022-04-05T14:47:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![davidz](https://avatars.discourse-cdn.com/v4/letter/d/a88e57/32.png) [@davidz](https://discourse.nodered.org/u/davidz)\
**Post date:** [5 April 2022 16:43 UTC](https://discourse.nodered.org/t/nodered-offline-and-i-need-to-use-date-time-range-picker-from-dashboard-ui/60775/5 "2022-04-05T16:43:07Z")

</div>

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.

---

<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:** [5 April 2022 17:31 UTC](https://discourse.nodered.org/t/nodered-offline-and-i-need-to-use-date-time-range-picker-from-dashboard-ui/60775/6 "2022-04-05T17:31:53Z")

</div>

Share your flow and I will take a look.

(use CTRL+E to export)

---

<div class="post-metadata">

**Author:** ![bertaud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bertaud/32/80981_2.png) [@bertaud](https://discourse.nodered.org/u/bertaud)\
**Post date:** [5 April 2022 18:32 UTC](https://discourse.nodered.org/t/nodered-offline-and-i-need-to-use-date-time-range-picker-from-dashboard-ui/60775/7 "2022-04-05T18:32:46Z")

</div>

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](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](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](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

---

<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:** [5 April 2022 18:51 UTC](https://discourse.nodered.org/t/nodered-offline-and-i-need-to-use-date-time-range-picker-from-dashboard-ui/60775/8 "2022-04-05T18:51:03Z")

</div>

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 `````)

````auto
``` 
   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](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

---

<div class="post-metadata">

**Author:** ![bertaud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bertaud/32/80981_2.png) [@bertaud](https://discourse.nodered.org/u/bertaud)\
**Post date:** [5 April 2022 18:58 UTC](https://discourse.nodered.org/t/nodered-offline-and-i-need-to-use-date-time-range-picker-from-dashboard-ui/60775/9 "2022-04-05T18:58:15Z")

</div>

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

```

---

<div class="post-metadata">

**Author:** ![bertaud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bertaud/32/80981_2.png) [@bertaud](https://discourse.nodered.org/u/bertaud)\
**Post date:** [5 April 2022 18:59 UTC](https://discourse.nodered.org/t/nodered-offline-and-i-need-to-use-date-time-range-picker-from-dashboard-ui/60775/10 "2022-04-05T18:59:16Z")

</div>

![not working case](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/3/732ae91fc9b12b075b3a2bc8e489a5cf8630989d.png)  
 ![working case](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/c/7caf68de4b942bc1af693211d4b5e7a830245852.png)

---

<div class="post-metadata">

**Author:** ![bertaud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bertaud/32/80981_2.png) [@bertaud](https://discourse.nodered.org/u/bertaud)\
**Post date:** [5 April 2022 19:03 UTC](https://discourse.nodered.org/t/nodered-offline-and-i-need-to-use-date-time-range-picker-from-dashboard-ui/60775/11 "2022-04-05T19:03:58Z")

</div>

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

```auto

<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 />

```

---

<div class="post-metadata">

**Author:** ![bertaud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bertaud/32/80981_2.png) [@bertaud](https://discourse.nodered.org/u/bertaud)\
**Post date:** [6 April 2022 07:59 UTC](https://discourse.nodered.org/t/nodered-offline-and-i-need-to-use-date-time-range-picker-from-dashboard-ui/60775/12 "2022-04-06T07:59:24Z")

</div>

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

---

<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:** [20 April 2022 07:59 UTC](https://discourse.nodered.org/t/nodered-offline-and-i-need-to-use-date-time-range-picker-from-dashboard-ui/60775/13 "2022-04-20T07:59:47Z")

</div>

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