adobe / adobe/react-spectrum

[DatePicker] Option to augment 2-digit year to equivalent 4-digit year of current century

Open
#5,081 2 comments 3 reactions 0 assignees View on GitHub
DatePicker enhancement
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the feature here

When using the `DatePicker`/`DateRangePicker`, the users of our app often type in dates like `10.09.23` when in fact they mean `10.09.2023`. In our application, there is practically no use-case for specifying any date that is not in the `20xx` range. While not generally desirable, it would be helpful to offer an option to interpret 2-digit years in such a way that it automatically fills those up with a leading `20`.

### 🤔 Expected Behavior?

After opting in to the behavior described above:

1.
- User types any 2 digits that do not equate the first two digits of the current year (i.e. anything other than `20`) into the year segment of a `DatePicker`/`DateRangePicker`
- The year is set to the according year of the current century (e.g. `23` => `2023`)
- The focus shifts to the element according to the currently implemented behavior
- The user is happy because the application saved them from a potentially costly mistake

2.
- User types `20` into the year segment of a `DatePicker`/`DateRangePicker`
- User either navigates to an adjacent segment or focuses an element outside of the `DatePicker`/`DateRangePicker`
- The year is set to the equivalent year of the current century (i.e. `2020`)
- The user is happy because the application saved them from a potentially costly mistake

### 😯 Current Behavior

- User types any 2 digits into the year segment of a `DatePicker`/`DateRangePicker`
- The focus stays within that segment until the user shifts it manually or adds another 2 digits
- The user shifts focus forward
- The year remains as the on that was typed in
- The user made a mistake by accident and is later confused and angry as to why the application does not seem to work as expected

### 💁 Possible Solution

see above

### 🔦 Context

See original discussion here https://github.com/adobe/react-spectrum/discussions/5071

### 💻 Examples

_No response_

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.