How to Use the Date field in a Dashboard Form?

Dashboard
1

I'm trying to use a date field on the dashboard form.

  • Node-RED 1.0.3
  • node-red-dashboard 2.19.3

Capture d’écran 2020-02-11 à 15.10.36
Capture d’écran 2020-02-11 à 15.10.361730×1545 140 KB

The minimal flow is below.

[{"id":"c170923f.e8d25","type":"ui_form","z":"13200504.60cf0b","name":"","label":"Form 6","group":"6c7ebd78.18e764","order":0,"width":0,"height":0,"options":[{"label":"Text","value":"text","type":"text","required":false,"rows":null},{"label":"Date","value":"date","type":"date","required":false,"rows":null}],"formValue":{"text":"","date":""},"payload":"","submit":"submit","cancel":"cancel","topic":"Contact","x":160,"y":100,"wires":[["6ca19943.a3c2b","350d069a.55503a"]]},{"id":"6ca19943.a3c2b","type":"ui_text","z":"13200504.60cf0b","group":"6c7ebd78.18e764","order":1,"width":"6","height":"4","name":"","label":"Result 6","format":"{{msg.payload}}","layout":"row-spread","x":500,"y":200,"wires":[]},{"id":"350d069a.55503a","type":"debug","z":"13200504.60cf0b","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":490,"y":260,"wires":[]},{"id":"6c7ebd78.18e764","type":"ui_group","z":"","name":"Group 6","tab":"d1b39f65.694068","disp":true,"width":"6","collapse":false},{"id":"d1b39f65.694068","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

Typing 11/02/2020 or 11-02-2020 returns an empty field for date, when my text is duly set to text.

Even the debug outputs a missing date.

{
	"payload": {
		"text": "my text"
	},
	"topic": "Contact",
	"socketid": "Hny0v4boTlWC6PUHAAAF",
	"_msgid": "adf0c636.e16df8"
}

However, if I leave the date field empty, result does include "date": null.

How to use the date field in a dashboard form? Thank you for your help!

2

@dceejay This looks like it could be a bug...

3

Im travelling at the moment, so feel free to fix it via PR.

4

Yeah...If I can...

5

@rei_vilo - what browser are you using? Try it using Chrome and see if it works.

6

A quick test with your flow seems to work for me...
image

7

Working on debugging it together with @zenofmud, it appears to be a client side javascript issue. I'm guessing that the datepicker is not popping up, nor the prefilled date format that is tested. It works for me on Firefox 71.0 on MacOS 10.15.3 without a problem too. I'm trying to figure out which part of the javascript are causing this (through comparing versions with caniuse), so it might be fixed/replaced.

8

I just checked Safari, Chrome and FireFox and it is only an issue in Safari. The data picker is not poping up

9

added a ui node date picker to the flow to see if the standalone does work in safari. It might be an issue on IE/Edge too, but I've no easy access to either of those without booting up another machine. The regular date picker node works good there, so I'm going to see why that one does and the one in the form doesn't.

10

I confirm it works on Chrome but not on Safari.

  • macOS 10.15.3
  • Chrome 80.0.3987.87
  • Safari 13.0.5
11

good ol Safari - https://caniuse.com/#feat=input-datetime
(and IE11)

12

And no polyfills available either that are follow a11y standards... Not an easy fix I'm afraid

13

Well if Apple can't (or won't) fix it with all their resources - not sure we should spend much effort on it.

However if you type in yyyy-mm-dd eg 2020-02-11 it does seem to work

2 Likes
14

Can confirm, however any other format is being dropped, so is this something that should be added to the node's documentation?

15

Another reason to switch back!

Let's go for 2020-02-11. Thank you!

Capture d’écran 2020-02-11 à 17.55.28
Capture d’écran 2020-02-11 à 17.55.28672×956 30.1 KB

16

aha - I may be able to add a default placeholder hint (yyyy-mm-dd) - that other browsers then replace. (now in master branch (but not npm))

1 Like
17

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