Date-Picker - Unable to edit year input

[zaramatheson]

Actual Behavior

Editing the year on calcite date-picker or input-date-picker does not stick.

Expected Behavior

The year you enter into the calendar should stick and the calendar should update to reflect that year.

cc @fra

Reproduction Sample

https://esri.github.io/calcite-components/?path=/story/components-controls-datepicker--simple

Reproduction Steps

1. Type the year into the text box on the calendar
2. Click out of the input box and the year will revert back to the original

Reproduction Version

@esri/[email protected]

Relevant Info

Regression? Last working version: @esri/[email protected]

Source

• CDN
• NPM package

[AdelheidF]

we had an issue before #1557

Seems to still confuse people...

[jcfranco]

@eriklharper Can you look at this for the next milestone?

[eriklharper]

Looks like the reason that editing the year by itself doesn't change the value is that the component requires you to click a day on the resulting month that appears when you change the year. I see the reasoning behind this UX decision, because when you start typing the year, the expectation is that the month display reflects the given month of the year that is present in the box, but because the new value (which is actually the day) hasn't been selected, this is why the value does not update when you unfocus the year box without clicking a day of the month.

It sounds like the desired behavior is to immediately update the value of the date picker as soon as a new valid year is entered in the year box. Is this correct?

One thing I am noticing that I would consider a bug (or at least a valid UX question) is the month view does not update when typing a new year unless I hit the enter key or tab to focus the right arrow key. If I click or unfocus the component completely, that resets the view to the last selected date, which makes sense. I do expect the month view to change immediately as I type, but I would not necessarily expect the value to change purely as a result of typing a new year, because I have not selected a new date, I have only typed a new year that will bring up a new selection of days to pick from.

When you start typing a different year than the current value and press enter or tab to unfocus the year input but keep the focus inside the component, it will highlight the corresponding day of the month in gray instead of blue (if it exists) which should tell the user that this is in fact the last selected nominal "day" value, but because it appears inactive it has not been committed or saved yet:

It sounds like the ask is to commit year changes to the value so that when the month view updates, the selected day should appear as blue and update the value. The question then becomes, what happens when you have a date picker with the stored value 2-29-2024 (the next leap year) and go back or forward a year where the 28th of February does not exist? Should the date-picker update it to 2-28 or 3-1 or simply not change the value? I think the UX decision to require clicking the day makes sense, particularly in this case since it forces the user to commit to changing the date by clicking the day of the new year typed.

[AdelheidF]

that the component requires you to click a day on the resulting month that appears when you change the year.

Switching the blue background to the inactive grey background is not really clear to me, I see something highlighted and assume it's selected. Same behavior happens when switching the month. Maybe it would be better then to remove any background color.

It sounds like the desired behavior is to immediately update the value of the date picker as soon as a new valid year is entered in the year box. Is this correct?

That would be nice and something I'd prefer. Feb 29 could switch to a day before, that is an edge case anyway.
FYI, the chance that someone uses Feb 29 while editing the year is about 0.00068 (once in 4 years). If we switch to the day before then the month doesn't change, that's why I though that would be the best.

---

https://codepen.io/afreitag/pen/yLPOpVY

Try this:
Edit year from 2020 to 2011 and without enter or clicking somewhere else click on day 15. The calendar closes and the value in the input does not change. Having to click on a white spot before clicking on a day is not straight forward.

[eriklharper]

Maybe it would be better then to remove any background color.

Makes total sense, I can see how that's confusing.

[eriklharper]

https://codepen.io/afreitag/pen/yLPOpVY

Try this:
Edit year from 2020 to 2011 and without enter or clicking somewhere else click on day 15. The calendar closes and the > > value in the input does not change. Having to click on a white spot before clicking on a day is not straight forward.

I agree this is a non-desirable UX because the month display does not update in real time as you type a new year value. It requires you to hit enter or unfocus the year box by tabbing in order for the entered month to re-render. We should definitely fix it so that the month display updates in real time.

[eriklharper]

That would be nice and something I'd prefer. Feb 29 could switch to a day before, that is an edge case anyway.

I'd like others to chime in on this since it feels very weird to arbitrarily decide which day should be selected (before or after) when Feb 29th is entered as the day. @jcfranco @benelan @driskull @paulcpederson

[benelan]

One other option would be to allow invalid dates with the value of "Invalid Date" like here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#return_value

Then we could just keep the date's day the same, and if its not valid it will be reflected in the value.

If we want go go deeper with that, we could eliminate a huge annoyance of the whole date being cleared when you're trying to type (unless this is on purpose?). For example, if you delete both numbers from the day the whole date is deleted. By allowing invalid dates we could prevent that from happening, e.g. 01//2022 has the value of "Invalid Date" but isn't completely cleared.

[benelan]

You can already type invalid dates so it wouldn't be unprecedented, e.g. https://codepen.io/benesri/pen/zYPqRaM

At least with the suggestion above the value will communicate that it is invalid, which will help developers with their validation.

[macandcheese]

I think the current behavior we have when using the arrow up / arrow down key to increment / decrement is the the expected behavior. We should replicate that (update calendar immediately).

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified on 1.0.0-beta.82