Daterange picker

[Viktor]

Hello,

I have one question regarding the date range picker. I found how to use it in some topics on this forum and it works for me, but there is one bug in my flow. When I deploy the flow and go to the dashboard, the date picker is empty and it's not possible to use it. Only after I refresh the page for two-three times it shows initial values and after this I can pick the date range. Could you please check my flow and help to fix this problem? This field is located on the History tab.

Or probably you know some other ways how to add date picker to the node red?

flows (3).json (28.2 KB)

[Colin]

You have posted a large flow which I can't run as there are sqlite db nodes that I don't have installed. It isn't immediately clear to me which node in the flow is the date range node. Please post just a short flow consisting of just a few nodes that shows the problem. Also please post flows inline as described in this canned reply:

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

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

[Viktor]

Sorry for this. I've created a small flow just with the date range picker now.

You can find the flow below:

[
    {
        "id": "f7ea14f57a69ae8f",
        "type": "tab",
        "label": "Flow 2",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "40bc636bac0110a2",
        "type": "ui_template",
        "z": "f7ea14f57a69ae8f",
        "group": "",
        "name": "HEAD scripts and css",
        "order": 6,
        "width": 0,
        "height": 0,
        "format": "<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/jquery/latest/jquery.min.js\"></script>\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\" />",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 220,
        "y": 160,
        "wires": [
            []
        ]
    },
    {
        "id": "d3f7b8172146b835",
        "type": "ui_template",
        "z": "f7ea14f57a69ae8f",
        "group": "100a09d1edca5ba4",
        "name": "",
        "order": 7,
        "width": "0",
        "height": "0",
        "format": "<input type=\"text\" id=\"daterange1\" />\n\n<script>\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,hh,mm');\n        payload.endDate = picker.endDate.format('YYYY,MM,DD,hh,mm');\n        scope.send({payload:payload});\n    });\n\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 180,
        "y": 200,
        "wires": [
            []
        ]
    },
    {
        "id": "100a09d1edca5ba4",
        "type": "ui_group",
        "name": "Date range",
        "tab": "5132060d.4cde48",
        "order": 1,
        "disp": true,
        "width": "7",
        "collapse": false,
        "className": ""
    },
    {
        "id": "5132060d.4cde48",
        "type": "ui_tab",
        "name": "History",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]

[Colin]

Can you describe what to do with that flow to see the problem?

[Viktor]

You should deploy the flow and go to the dashboard to see the problem.
The main issue here - I'm not able to choose the date range right after deploying - the date range picker is empty.

And then after I refresh the page several times - it starts to work.
The problem repeats sometimes after refreshing the dashboard or after deploying the flow.

[Colin]

@Viktor

I have one question regarding the date range picker.

You did not make it clear when you say 'the date picker' that you meant an element from daterangepicker CDN by jsDelivr - A free, fast, and reliable Open Source CDN, which is nothing to do with node-red.

In your template you have

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<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" />

I don't know whether it is valid to source jquery and moment there. I think you will have to wait for someone with more experience in this area to help.

[Viktor]

Ok Colin, sorry to confuse you.

Will wait a bit, probably someone else knows something about it.

If no, then I'll try to implement the same date picker with the build-in node.