Node-Red: Dashboard Form

Hello All,

I am working with Node-red V3.0.2 and Node.js V16.20.0, installed in a Raspberry Pi 4
In part of a project, I use "Node-Red: Dashboard Form" to collect multiple values from the user on the submit button.
I have added a Date type input in this form to select the actual date from the dropdown menu and show it on the output.
However, the date that is generated in the output does not match the local time zone that I have set on my Raspberry Pi.
I would appreciate it if someone could share their experience with me to fix this error.

Thank you.

I suggest the first thing to do is upgrade Node-red and especially node.js

Use the command from the documentation and put --node20 at the end outside the brackets.

Check via manage palette for updates to node-red-dashboard too.

It might not affect ui-form but will resolve lots of issues with out of date node.js.

Thanks for your reply,
I have updated everything you suggested. However, the Date and Time coming from Form Node still do not match my local time zone.
Node-Red: Dashboard Form output --> 2024-06-06T22:00:00.000Z while I am in 06/07/2024 on my Raspberry Pi.

What timezone are you in?

Can you share the relevant part of your flow and tell us what you enter into the form?

Also the timezone setting on the Pi (date and locale commands)

If you are viewing the dashboard from another computer, the timezone settings there too.

What date/time in your time zone is 22:00 UTC on 6th?

What do you get if you enter the command timedatectl in your cmd prompt?
It should return amongst other things your Local Time and also the Timezone which your system is using. Are they both correct?

In what format do you want the date?

I've set Europe and Paris time zones in the Raspberry Pi (Tutorial). Similarly, I select "UTC+01:00 Paris" on my PC, where I check the Node-red dashboard.
here you have a JSON for this test.

[
    {
        "id": "0aa81f27b03a5529",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "383541189db48432",
        "type": "ui_form",
        "z": "0aa81f27b03a5529",
        "name": "",
        "label": "",
        "group": "8f1d10f48f93aac5",
        "order": 2,
        "width": 0,
        "height": 0,
        "options": [
            {
                "label": "Date",
                "value": "Date ",
                "type": "date",
                "required": true,
                "rows": null
            }
        ],
        "formValue": {
            "Date ": ""
        },
        "payload": "",
        "submit": "Submit",
        "cancel": "Cancel",
        "topic": "payload",
        "topicType": "str",
        "splitLayout": true,
        "className": "",
        "x": 430,
        "y": 280,
        "wires": [
            [
                "37414371a9b9a5cb"
            ]
        ]
    },
    {
        "id": "37414371a9b9a5cb",
        "type": "debug",
        "z": "0aa81f27b03a5529",
        "name": "debug 19",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 640,
        "y": 280,
        "wires": []
    },
    {
        "id": "8f1d10f48f93aac5",
        "type": "ui_group",
        "name": "Default",
        "tab": "f6e26b53496f9dcb",
        "order": 5,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "f6e26b53496f9dcb",
        "type": "ui_tab",
        "name": "Checkist ",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

image

The timezone and local time are the same as my PC where I see the dashboard.
This is what I am looking for by Form Node. :neutral_face:

For the right moment, the format is not my issue, just I need the right date and time to match my timezone.

Your sample form makes things unnecessarily complicated by returning it's value as msg.payload["Date "]. Once I got rid of that space it was much easier.

The ui-form returns the selected date as 00:00:00.0000 on that date, formatted as an ISO datetime string (Timezone Z or Zero or Zulu)

So at 23:08 GMT +1 on 7th June it returns {"Date ":"2024-06-06T23:00:00.000Z"}
ie it converts my time (BST) to UTC and returns it as a string.

To get it back into GMT I need to convert it to a date object, eg with a function node.

[{"id":"383541189db48432","type":"ui_form","z":"0aa81f27b03a5529","name":"","label":"","group":"8f1d10f48f93aac5","order":2,"width":0,"height":0,"options":[{"label":"Date","value":"Date","type":"date","required":true,"rows":null}],"formValue":{"Date":""},"payload":"","submit":"Submit","cancel":"Cancel","topic":"payload","topicType":"str","splitLayout":true,"className":"","x":470,"y":140,"wires":[["c286b59ac9440f3c","4f13df494e3770e4"]]},{"id":"37414371a9b9a5cb","type":"debug","z":"0aa81f27b03a5529","name":"debug 19","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":780,"y":140,"wires":[]},{"id":"c286b59ac9440f3c","type":"function","z":"0aa81f27b03a5529","name":"function 1","func":"msg.payload = new Date(msg.payload.Date)\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":620,"y":140,"wires":[["37414371a9b9a5cb"]]},{"id":"4f13df494e3770e4","type":"debug","z":"0aa81f27b03a5529","name":"debug 41","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload[\"Date\"]","targetType":"msg","statusVal":"","statusType":"auto","x":620,"y":100,"wires":[]},{"id":"8f1d10f48f93aac5","type":"ui_group","name":"Default","tab":"f6e26b53496f9dcb","order":5,"disp":true,"width":"6","collapse":false,"className":""},{"id":"f6e26b53496f9dcb","type":"ui_tab","name":"Checkist ","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Note that you are getting the right time. Your form is giving you 6th June, 22:00 UTC, which is exactly the same time as 7th June 00:00 CEST. Your issue is with the formatting. Do you want to see a string "07/06/24" or a Date object containing the timestamp or what?

A side question, are you committed to using the older dashboard or are you early enough in your development cycle that you could switch to the new dashboard @flowfuse/node-red-dashboard? The problem you have found (and it is confusing, I know) has been addressed by making the date form element return a string such as "2024-06-07". The dashboard is under very active development, there are still some missing features, but I have moved all my dashboards over.

1 Like

Thank you very much @jbudd and @Colin for your informative reply about the format Date. Now I understand where this error comes from.
I'm going to move to the new dashboard as well and hopefully, I can get rid of these funny errors.

1 Like

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