Add invalid handling to calcite-input-date-picker

[paulcpederson]

Description

When a user enters totally invalid input into a date picker, no feedback is given to the user or to the app developer.

Acceptance Criteria

• add status prop to calcite-input-date-picker (status: "idle" | "invalid" | "valid")
• new CalciteInputDatePickerInvalid event added to calcite-input (emitted on blur of input with invalid date entered)

Relevant Info

Which Component

calcite-input-date-picker

Example Use Case

In our application, we need a way to notify the user that the date they entered is not valid.

@benelan feel free to assign me, happy to add this in

@jcfranco @driskull would love feedback on this api as well

[jcfranco]

Validation is something we want to support consistently across our form/value components. I'd like for the design team to look at this holistically before we start thinking about implementation. cc @HeathMeyette @macandcheese @benelan

[yelenakreyndel]

@ashetland is this item similar to the one you are working on?

[ashetland]

@ashetland is this item similar to the one you are working on?

No, this is a separate issue and component. Not related to the input-time enhancement.

[geospatialem]

This enhancement was mentioned by the MapViewer team as well to accommodate start/end dates for the time slider.

[Olga8614]

We verified this defect on ArcGIS Online 2023.r01 devext and qaext site (2/13/2023) in EN language with Edge chromium/Chrome/FF/Safari browsers. For Gallery page, design changed, date under "Custom range..." on Gallery page can only be modified in calendar, selected date can only be showed in calendar without date textbox. For Content/Group/Organization page: The deleted value in date is removed accordingly each time press backspace keyboard and no invalid date is appeared after deleted the date. So this defect is fixed. Thanks!

[geospatialem]

Evaluated design will include the status prop, additional considerations part of the larger validation epic if #4598.

[geospatialem]

Effort should be executed with https://github.com/Esri/calcite-design-system/issues/4276

More info on Figma and below:

[github-actions[bot]]

cc @geospatialem, @brittneytewks

[geospatialem]

This request was also filed as a bug with Online, BUG-000159719.

Repro case:

1. Open https://codepen.io/banuelosj/pen/qBQyNrQ
2. Type a date with the year ending in two digits, for instance 8/1/23
3. Select outside the date to close the component
4. Observe the date is displayed as 0023-08-01

[amring1]

Analysis is also tracking this fix (https://devtopia.esri.com/WebGIS/arcgis-web-analysis/issues/4166)

[geospatialem]

@SkyeSeitz Want to verify the above comment encompasses the Online bug report from last month before finalizing the dev effort.

Could you take a peek, and if we need to add additional content to ensure the fix, we could consider breaking off the effort into two different issues to fulfill the bug first. WDYT?

[SkyeSeitz]

Thanks, @geospatialem! Doesn't look like is there is any design work needed on the Online bug report, correct? I would consider this bug as separate from the validation support effort.

[geospatialem]

Opened https://github.com/Esri/calcite-design-system/issues/7588 to separate the bug from the enhancement effort to prioritize the bug effort. Will be reallocating the enhancement effort into the upcoming September milestone, and hope to tackle the bug as soon as possible. cc @banuelosj @amring1

[Olga8614]

We verified this defect on ArcGIS Online 2024.r01 devext site (12/19/2023) in ENU language with Edge Chromium/FF/Safari/Chrome browsers. Invalid characters can be entered in textbox of Start date/End date/Start time/End time/Count options on Time slider options pane. So this defect is not fixed. Thanks!

[geospatialem]

Closing in favor of the efforts completed in https://github.com/Esri/calcite-design-system/issues/8057, where the status property was added, along with an internal input-message for displaying validation messages.

Additional efforts will be completed in https://github.com/Esri/calcite-design-system/issues/8000 for setting the validity state of the component internally.

[geospatialem]

We verified this defect on ArcGIS Online 2024.r01 devext site (12/19/2023) in ENU language with Edge Chromium/FF/Safari/Chrome browsers. Invalid characters can be entered in textbox of Start date/End date/Start time/End time/Count options on Time slider options pane. So this defect is not fixed. Thanks!

@Olga8614 While a portion of the effort has been mitigated, there are still additional requirements needed to be mitigated in full, which will be handled via #8000.