# How to Use the Date field in a Dashboard Form?

**URL:** <https://discourse.nodered.org/t/how-to-use-the-date-field-in-a-dashboard-form/21541>\
**Category:** Dashboard\
**Created:** [11 February 2020 14:19 UTC](https://discourse.nodered.org/t/how-to-use-the-date-field-in-a-dashboard-form/21541 "2020-02-11T14:19:46Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![rei\_vilo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rei_vilo/32/162_2.png) [@rei\_vilo](https://discourse.nodered.org/u/rei_vilo)\
**Post date:** [11 February 2020 14:19 UTC](https://discourse.nodered.org/t/how-to-use-the-date-field-in-a-dashboard-form/21541/1 "2020-02-11T14:19:46Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/3/93cbb41bd7f662e77f4b14930b1455420996a017.png)

The minimal flow is below.

```auto
[{"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`.

```auto
{
	"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!

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [11 February 2020 15:11 UTC](https://discourse.nodered.org/t/how-to-use-the-date-field-in-a-dashboard-form/21541/2 "2020-02-11T15:11:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [11 February 2020 15:15 UTC](https://discourse.nodered.org/t/how-to-use-the-date-field-in-a-dashboard-form/21541/3 "2020-02-11T15:15:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [11 February 2020 15:17 UTC](https://discourse.nodered.org/t/how-to-use-the-date-field-in-a-dashboard-form/21541/4 "2020-02-11T15:17:18Z")

</div>

Yeah...If I can...

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [11 February 2020 16:02 UTC](https://discourse.nodered.org/t/how-to-use-the-date-field-in-a-dashboard-form/21541/5 "2020-02-11T16:02:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [11 February 2020 16:04 UTC](https://discourse.nodered.org/t/how-to-use-the-date-field-in-a-dashboard-form/21541/6 "2020-02-11T16:04:29Z")

</div>

A quick test with your flow seems to work for me...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/5/359d341e643da7b5aee3a6781ced898c78c424d4.png)

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [11 February 2020 16:06 UTC](https://discourse.nodered.org/t/how-to-use-the-date-field-in-a-dashboard-form/21541/7 "2020-02-11T16:06:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [11 February 2020 16:08 UTC](https://discourse.nodered.org/t/how-to-use-the-date-field-in-a-dashboard-form/21541/8 "2020-02-11T16:08:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [11 February 2020 16:14 UTC](https://discourse.nodered.org/t/how-to-use-the-date-field-in-a-dashboard-form/21541/9 "2020-02-11T16:14:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rei\_vilo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rei_vilo/32/162_2.png) [@rei\_vilo](https://discourse.nodered.org/u/rei_vilo)\
**Post date:** [11 February 2020 16:17 UTC](https://discourse.nodered.org/t/how-to-use-the-date-field-in-a-dashboard-form/21541/10 "2020-02-11T16:17:35Z")

</div>

I confirm it works on Chrome but not on Safari.

- macOS 10.15.3
- Chrome 80.0.3987.87
- Safari 13.0.5

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [11 February 2020 16:40 UTC](https://discourse.nodered.org/t/how-to-use-the-date-field-in-a-dashboard-form/21541/11 "2020-02-11T16:40:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [11 February 2020 16:44 UTC](https://discourse.nodered.org/t/how-to-use-the-date-field-in-a-dashboard-form/21541/12 "2020-02-11T16:44:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [11 February 2020 16:51 UTC](https://discourse.nodered.org/t/how-to-use-the-date-field-in-a-dashboard-form/21541/13 "2020-02-11T16:51:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [11 February 2020 16:54 UTC](https://discourse.nodered.org/t/how-to-use-the-date-field-in-a-dashboard-form/21541/14 "2020-02-11T16:54:03Z")

</div>

> [@dceejay](#):
>
> However if you type in yyyy-mm-dd eg 2020-02-11 it does seem to work

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

---

<div class="post-metadata">

**Author:** ![rei\_vilo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rei_vilo/32/162_2.png) [@rei\_vilo](https://discourse.nodered.org/u/rei_vilo)\
**Post date:** [11 February 2020 16:54 UTC](https://discourse.nodered.org/t/how-to-use-the-date-field-in-a-dashboard-form/21541/15 "2020-02-11T16:54:49Z")

</div>

> [@dceejay](#):
>
> good ol Safari - [Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/#feat=input-datetime)

Another reason to switch back!

> [@dceejay](#):
>
> However if you type in yyyy-mm-dd eg 2020-02-11 it does seem to work

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

 ![Capture d’écran 2020-02-11 à 17.55.28](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/c/5c096e81338913d0417100c10ab417c2888bc48c.png)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [11 February 2020 17:22 UTC](https://discourse.nodered.org/t/how-to-use-the-date-field-in-a-dashboard-form/21541/16 "2020-02-11T17:22:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [25 February 2020 17:22 UTC](https://discourse.nodered.org/t/how-to-use-the-date-field-in-a-dashboard-form/21541/17 "2020-02-25T17:22:21Z")

</div>

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