vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
444 stars 83 forks source link

date-picker: min and max should support full ISO string #3942

Open manolo opened 2 years ago

manolo commented 2 years ago

Description

API doc says that min and max support ISO 8601 "YYYY-MM-DD or 6-digit extended ISO 8601 +YYYYYY-MM-DD

But when use the JS Date API toISOString() it returns more information.

NOTE: Another option would be to support proper Date objects instead of their string representation

I would expect in my Hilla app that I can write something like

  <vaadin-date-picker 
      label="Date of Bird" 
     .max=${new Date().toISOString()}
     ${field(this.binder.model.dateOfBirth)}>
  </vaadin-date-picker>

Workaround

Use a regex for adjusting the toISOString() output, but looks ugly in code

.max=${new Date().toISOString().replace(/T.*$/, '')}

Expected outcome

toISOString() is supported, otherwise an error in console saying unsupported format for min or max

Minimal reproducible example

see snippet above

Steps to reproduce

Add the snippet above to a Hilla app

Environment

Vaadin version(s): 23.1.0.rc1 and earlier OS: Any

Browsers

No response

web-padawan commented 1 year ago

Some comments from the PR that we decided not to proceed with: https://github.com/vaadin/web-components/pull/3953

https://github.com/vaadin/web-components/pull/3953#discussion_r885257851:

Allowing Z will add a notion that the component is timezone aware - which it is not. If you specify a Z in an ISO 8601 string, that means that this date string is explicitly in UTC. However for most use-cases in a UI, you want to display dates/times in the user's local timezone. Currently we don't deal with this issue at all, because you are not allowed to specify time zones in the date string, and developers have to make sure they convert their date values into a proper local representation, and vice versa. However if we allow pass an ISO 8601 string in UTC to the component, I would expect the date picker to display a local date.

https://github.com/vaadin/web-components/pull/3953#discussion_r902399701:

Date-picker doesn't know anything about timezones nor GMT. If we just strip out the Z suffix, the resulting date could be wrong as pointed out in the example case above.

Additionally, toISOString() includes hours, minutes, seconds and milliseconds and date-picker doesn't operate on that precision so passing a value like that wouldn't make sense. This is also the case with native <input type="date">:

Screenshot 2022-06-21 at 12 40 43