Date Picker adding odd time

davebanthorpe · 13 September 2019 11:40

HI - I've added a date picker node to my dashboard. When I look at the output and convert that unix timestamp to a real date time (e.g. on unixtimestamp.com), it always seems to set the time to 9:10am (UTC). I was assuming that the date picker would output the timestamp with the time set to midnight.

What I am trying to do is build a dashboard where you can specify the start date/time and end date/time for a filter - date picker gives date, then I have dropdowns allowing choice of hour (in 24 hour format). I then simply add the selected hours to the selected date. But since the timestamp from the date picker already has hours set (at 9:10 am), of course the output is then wrong.

What is causing the date picker to set this odd hour/minute?

zenofmud · 13 September 2019 17:37

Could you export your flow and attach it to a reply - see this thread for instructions

Bobo · 14 September 2019 10:32

Are you injecting anything into the date picker? If an inject node is set to timestamp and you inject that into the date picker I think it will be set to your current time, and remain like that, until you inject something else.

davebanthorpe · 24 September 2019 10:05

HI sorry had been on a short vacation!

OK - so nothing being injected. I have just created a basic flow with a date picker going to a debug.

[
{
"id": "7f86ea3e.47f1a4",
"type": "tab",
"label": "Flow 4"
},
{
"id": "496ddd9e.1fb564",
"type": "ui_date_picker",
"z": "7f86ea3e.47f1a4",
"name": "",
"label": "date",
"group": "d9f24c8.aec10b",
"order": 0,
"width": 0,
"height": 0,
"passthru": true,
"topic": "",
"x": 180,
"y": 60,
"wires": [
[
"961a0b42.4c34f8"
]
]
},
{
"id": "961a0b42.4c34f8",
"type": "debug",
"z": "7f86ea3e.47f1a4",
"name": "",
"active": true,
"console": "false",
"complete": "false",
"x": 300,
"y": 60,
"wires":
},
{
"id": "d9f24c8.aec10b",
"type": "ui_group",
"z": "",
"name": "Data",
"tab": "d6e76239.d1ed8",
"order": 3,
"disp": true,
"width": "12",
"collapse": false
},
{
"id": "d6e76239.d1ed8",
"type": "ui_tab",
"z": "",
"name": "Historian",
"icon": "dashboard",
"order": 3
}
]

ukmoose · 24 September 2019 10:10

Unfortunately your flow isn't currently importable.Please read the following post How to share code or flow json and then edit the above message.

davebanthorpe · 24 September 2019 10:28

[
    {
        "id": "496ddd9e.1fb564",
        "type": "ui_date_picker",
        "z": "7f86ea3e.47f1a4",
        "name": "",
        "label": "date",
        "group": "d9f24c8.aec10b",
        "order": 0,
        "width": 0,
        "height": 0,
        "passthru": true,
        "topic": "",
        "x": 180,
        "y": 60,
        "wires": [
            [
                "961a0b42.4c34f8"
            ]
        ]
    },
    {
        "id": "961a0b42.4c34f8",
        "type": "debug",
        "z": "7f86ea3e.47f1a4",
        "name": "",
        "active": true,
        "console": "false",
        "complete": "false",
        "x": 300,
        "y": 60,
        "wires": []
    },
    {
        "id": "d9f24c8.aec10b",
        "type": "ui_group",
        "z": "",
        "name": "Data",
        "tab": "d6e76239.d1ed8",
        "order": 3,
        "disp": true,
        "width": "12",
        "collapse": false
    },
    {
        "id": "d6e76239.d1ed8",
        "type": "ui_tab",
        "z": "",
        "name": "Historian",
        "icon": "dashboard",
        "order": 3
    }
]

Colin · 24 September 2019 10:38

If you add a function node with

msg.payload = new Date(msg.payload)
return msg;

then for me when I select a date it is providing that date but setting the time to the time the node was deployed, or first displayed, or something like that. I would have thought that was at least a deficiency if not a bug.
However, as a workaround, if you just want the date then all you have to do is to clear the time of day before adding in your extra offset.

davebanthorpe · 24 September 2019 10:41

ok that makes sense - could not understand why the time was being set as would have thought it should have been set to midnight on the date selected. As you say, not ideal but not necessarily a bug.

tonylane26 · 27 April 2020 15:55

Colin, can you explain how to achieve "clearing the time of day" from the datepicker payload? The only way I can think to do that is to extract the time in the payload in hours,mins,secs.ms, converting it all to milliseconds and then subtract it. Is there an easier way? I'm still learning and probably missing something obvious.
I'm not sure what the use case is for including the semi-random time (in UTC), since the datepicker Node only chooses Date and not time. In my case I'm using it to select records from a SQLITE database by Date, and this seems awkward.
Thanks in advance for any guidance.

Colin · 27 April 2020 21:11

Have a look at the docs for the Date object (https://www.w3schools.com/jsref/jsref_obj_date.asp) and you will see functions to set the hours, mins etc. You can call those to clear the relevant parts.

tonylane26 · 28 April 2020 21:38

I think I've figured it out, and in the process learned a lot more about moving between timestamps and time-strings and extracting the time/date components. Here's a summary of what I found:

I compared the output from the datepicker UI to the output from a form UI with a Date. The Picker adds the last deployment time of day offset to the picked date. Can't see what the use case is for this, and it's a pain in my application. The form UI always returns the UTC date with no time offset, i.e. midnight.
Removing the time offset from the Picker seems like a lot of code, unless there's an easier way.
I guess this is just my lack of javascript knowledge, but it took a while to work out that the Date() function needs to be prefixed with 'new' every time it's used.

My application is using these UI nodes to SELECT data from a SQLITE database, and since the date functions of SQL default to data stored in UTC, the form UI seems much more aligned.

Any feedback or suggestions are welcome.

Colin · 29 April 2020 09:28

I am not sure exactly what you need, but iIf you want to get a timestamp for the start of the local timezone day from the date time picker you can do

let startOfDayUtc = Math.floor(msg.payload/(24*3600*1000))*24*3600*1000
let tzOffset_ms = (new Date(startOfDayUtc)).getTimezoneOffset() * 60000
msg.payload = new Date(startOfDayUtc + tzOffset_ms)
return msg;

If you want it in ticks rather than a Date then replace the penultimate line with

msg.payload = startOfDayUtc + tzOffset_ms

tonylane26 · 29 April 2020 13:09

Thanks Colin. A lot simpler than mine, of course! I still think it would be nice if UI_date_picker output had an option to deliver it like this, without the somewhat spurious time-of-day-node-deployed, and therefore in line with UI_form for Date fields, which does exactly this. I think going forward I will use UI_form.

Colin · 29 April 2020 14:13

I agree. I don't know whether anyone ever submitted an issue against the node.

Topic		Replies	Views
UI text input date timer picker issue Dashboard	1	135	7 July 2023
Node-red date picker issue General	10	346	19 June 2023
Time picker sets time in 1970 Dashboard	3	435	25 July 2020
Problem with Time Picker Node Dashboard node-red-dashboard , database	4	221	6 August 2023
Set Time in a DATE PICKER General node-red-dashboard	2	543	28 February 2022

Date Picker adding odd time

Related topics