Allow entering leading zeroes into DateSegment.

[adriantrunzo]

Provide a general summary of the feature here

With any of the Date related components from React Aria Components -- DateField, DatePicker, DateRangePicker -- the user cannot enter leading zeroes. When the placeholder value shows 2 digits, like "mm", users can think that they have to enter both digits, but don't receive any feedback when entering leading zeroes.

🤔 Expected Behavior?

When focused on a month, day, or year date segment, provide feedback when a leading zero is entered by changing the segment value to "0" (or "00" when shouldForceLeadingZeroes is enabled). When the segment loses focus and still has a numeric value of zero, revert the segment to its previous value or the placeholder if no previous value.

😯 Current Behavior

Pressing zero to enter a leading "0" as in month "03" provides no feedback:

https://github.com/adobe/react-spectrum/assets/1218900/69a8796f-3935-4a1e-abb5-de14ee7244ad

💁 Possible Solution

I haven't investigated any workarounds. The HTML date input shows feedback for entering zeroes by changing the value to "00". I recognize that keeping the zero value is troublesome since it's never a valid value (not even for year), which is why I suggest reverting any only zero values when the date segment loses focus.

Here's an example of using the HTML date input in Firefox and getting feedback when entering leading zeroes: https://github.com/adobe/react-spectrum/assets/1218900/167fa676-50b3-440e-a6aa-cba6501f8c5e

🔦 Context

While building a styled wrapper of DateRangePicker, some of the first feedback I received is that the keyboard access for entering dates is broken -- the placeholder shows "mm/dd/yyyy", but when you try to enter a leading zero nothing happens.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[adriantrunzo]

Possibly a duplicate of https://github.com/adobe/react-spectrum/issues/5364. The ability to enter leading zeroes is also mentioned there in addition to other feedback.

[ryo-manba]

I agree, the silent acceptance of leading zeroes can be confusing. Imagine entering "0" as a placeholder for December ("12") but then typing "1". The component interprets it as "01" and jumps ahead. This can lead to errors if a user accidentally starts with a leading zero.

Here's how different browsers handle leading zeroes in a standard date input:

• Chrome: Entering "0" twice shows "00" but reverts to "01" when focus is lost.
• Safari: Entering "0" twice displays "01".
• Firefox: Entering "0" twice shows "01", but a third "0" changes it to "00" which persists even after losing focus.

Personally, I find Chrome's behavior most intuitive. It provides immediate feedback on the leading zero while still allowing two-digit entry.

However, I don't know for sure whether it is natural for all languages supported by React Aria (such as Arabic (Egypt)) to have an equivalent of "0" at the beginning.

Linking to a related issue https://github.com/adobe/react-spectrum/issues/5995

[buffalom]

Additional observation:

Entering "0" first not only doesn't give any feedback, but also prevents entering a full segment afterwards.

E.g. when I enter "02020" in the year segment, it only shows "202". However, the user does not get any feedback on why they cannot enter an additional "0" to form "2020".

(Tested both with and without shouldForceLeadingZeroes)

If the segment isn't the last segment at least feedback is given through moving to the next segment.

https://github.com/adobe/react-spectrum/assets/20814747/2cbf6140-1e03-4850-9ab4-e03631259f51