search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.93k stars 1.12k forks source link

Add property format to DateInput to avoid relying on locale for formatting #7150

Open anarute opened 3 weeks ago

anarute commented 3 weeks ago

Provide a general summary of the feature here

Currently in order to enforce a specific date format to the DateInput and DatePicker it is needed a workaround by using a I18nProvider with a locale that suites the wanted format.

🤔 Expected Behavior?

A simpler way to pass the format to the component that is not hacky and gives more flexibility to displaying time.

😯 Current Behavior

<I18nProvider locale="zh-CN">
  <DateInput style={{ display: 'flex' }}>
    {(segment) => <DateSegment segment={segment} />}
  </DateInput>
</I18nProvider>

Which is still not great as I'm using a completely different locale in order to have a close behavior to what I need but still not good as the results is YYYY/mm/dd and not YYYY-MM-DD and also not always 2 digits in the month and day values.

💁 Possible Solution

A prop where the desired format can be passed without needing to override any locale, something like:

 <DateInput format="YYYY-MM-DD">
   {(segment) => <DateSegment segment={segment} />}
 </DateInput>

🔦 Context

The current solution is not great because the format still isn't what I need (YYYY-MM-DD) and it is a very hacky solution. Working on an international team it is important to set a common format to the calendars and not rely on users locale for that.

This is somewhat related with https://github.com/adobe/react-spectrum/issues/3986

💻 Examples

Something similar to https://mui.com/x/react-date-pickers/adapters-locale/#custom-field-format or https://shahabyazdi.github.io/react-multi-date-picker/props/

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

LFDanLu commented 2 weeks ago

Perhaps a bit related: https://github.com/adobe/react-spectrum/issues/6342#issuecomment-2387207522. That link describes some of the challenges we had in deciding what locale to even go with if one isn't specified. I'll bring up the possibility of modifying the format of the date via format like you mentioned to the team, but its hard to say in general what a user would expect to see IMO

anarute commented 2 weeks ago

@LFDanLu thank you for the reply! I think it makes sense for many B2C products to use like it is implemented and have the locale based on the user, but for corporate products sometimes it's quite important to be able to override the user setting to have a common date format for everyone and avoid confusion between colleagues (like 01/03/2024 is March or January? for instance).

LFDanLu commented 2 weeks ago

The team discussed this today and even if we allowed the reordering of the segments, there is still a bunch of display things that need to be tied to a locale being provided such as formatting within the segments themselves (aka hour format, value formatting, etc)

anarute commented 1 week ago

@LFDanLu got it, thank you for considering it.