Dashboard ui_Form Date

I ran the update but as expected no difference :slight_smile:

And the browser question?

Same on Vivaldi Browser.

I tried it also running node-red on WIndows...same here

Odd, can you export a mini flow just consisting of the ui nodes needed and a debug node that shows the problem?

[{"id":"2011d220.e28e8e","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"ae565e9b.4a724","type":"ui_form","z":"2011d220.e28e8e","name":"","label":"Date in Form","group":"5a80f7fa.fb5098","order":2,"width":"0","height":"0","options":[{"label":"Datum","value":"Datum","type":"date","required":true,"rows":null}],"formValue":{"Datum":""},"payload":"","submit":"submit","cancel":"cancel","topic":"","x":330,"y":200,"wires":[["deaad8a1.fb7b48"]]},{"id":"deaad8a1.fb7b48","type":"ui_text","z":"2011d220.e28e8e","group":"5a80f7fa.fb5098","order":1,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","x":560,"y":200,"wires":[]},{"id":"5a80f7fa.fb5098","type":"ui_group","z":"","name":"Date(Form)","tab":"449bd675.359ec8","order":1,"disp":true,"width":"6","collapse":false},{"id":"449bd675.359ec8","type":"ui_tab","z":"","name":"TestTaB","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

Try updating dashboard to latest. There was a fix around the date picker which I believe was added just after release of v2.23.0

@knubbl indicated that he had already updated the dashboard, I suggested that earlier, but perhaps it was not done.

Date picker is working fine.

The problem is the ui_form in which i put a date input field

Can you confirm that you have updated the dashboard? Also confirm what you see from the flow you posted and the timezone of the machines running the browser and node red.
For me, when I enter 19/09/20 it gives {"Datum":"2020-09-18T23:00:00.000Z"} which is a timestamp for the start of the day in local time (23:00 on 18th UTC, which is midnight UTC+1), which I assume is what the node is supposed to provide.

Demo...

Chosen date was 2020/09/06...
image
... times are output in UTC, I am in UTC+1 (so add the offset and you get 00:00 of the correct date)

The issue is purely visual - the date / time is in-fact correct, merely represented as UTC.

If need be, you can use a function like below to get a local date/time representation...

function convertUTCDateToLocalDate(date) {
    var newDate = new Date(date.getTime()+date.getTimezoneOffset()*60*1000);

    var offset = date.getTimezoneOffset() / 60;
    var hours = date.getHours();

    newDate.setHours(hours - offset);

    return newDate;   
}

Get the following error message

TypeError: date.getTime is not a function

This means your date is not a date object (It is likely an epoch or string)

Try this instead...

Flow to import...

[{"id":"35156752.400eb8","type":"function","z":"ebd0d71c.0bad18","name":"date parser","func":"\nlet d = new Date(msg.payload.date)\nlet dateTimeLocal = new Date(d.getTime() - (d.getTimezoneOffset() *  60000)).toISOString().slice(0,23).replace(\"T\",\" \");\nlet dateLocal = dateTimeLocal.slice(0,10)\nmsg.payload = {\n    dateObject: d,\n    dateTimeLocal: dateTimeLocal,\n    dateLocal: dateLocal,\n}\nreturn msg;","outputs":1,"noerr":0,"x":1110,"y":140,"wires":[["fcb55760.fde188"]]},{"id":"ef045e1a.6dddb","type":"ui_form","z":"ebd0d71c.0bad18","name":"","label":"","group":"376c9cdf.3d0184","order":0,"width":0,"height":0,"options":[{"label":"date","value":"date","type":"date","required":true,"rows":null}],"formValue":{"date":""},"payload":"","submit":"submit","cancel":"cancel","topic":"","x":1050,"y":100,"wires":[["35156752.400eb8"]]},{"id":"fcb55760.fde188","type":"debug","z":"ebd0d71c.0bad18","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":1170,"y":180,"wires":[]},{"id":"376c9cdf.3d0184","type":"ui_group","z":"","name":"UserEntry","tab":"4af0eb21.b30c04","order":1,"disp":true,"width":"6","collapse":false},{"id":"4af0eb21.b30c04","type":"ui_tab","z":"","name":"Home","icon":"home","order":1}]

Thanks for your help.

Im not happy with the fact i have to convert but it works now and i can go on with my flow.

Strictly speaking, you don't have to. The time is actually correct. UTC 23:00 is the same as 00:00 UTC+1

It all depends on what you're doing with the date.

1 Like

It may seem odd that the date is given in that format but as @Steve-Mcl says it depends on what you want to do with it. Suppose, for example, that you wanted to create a timestamp that was 09:00 local time on the day selected in the form. To get that you can simply add 9 hours to the timestamp returned by the form and you will get the correct timestamp.

I want to write a value and a timestamp (date) to a database. So i was trying to use the ui_form for input the value and the date .

in which case, ideally, a database timestamp should be UTC.

Only your presentation layer should handle timezone formatting.

Using UTC in the database prevents issues around daylight saving time DST & much more.

Ok u r right.

Do you think its a good tradeoff to use two entries one for UTC and one for LT?

Yes, that I've seen and used that practice.

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