Support for localized date formats for Date Input widget

[DirkBaumannDXC]

Is your feature request related to a problem? Please describe.
Halstack provides a "Localization" feature, but no support for localized date formats for the Date Input widget.
The Date Input widget supports the configuration of the format, but this has to be done "manually" and is currently not supported by the Halstack Localization feature.

Describe the solution you'd like
Halstack should support localized date formats similar to the Material Date widget (https://mui.com/x/react-date-pickers/adapters-locale/).

Describe alternatives you've considered
As alternative every user of Halstack has to implement it's own support for localized date formats.

[github-actions]

Thank you for opening an issue! 🚀

Our team will review it as soon as possible. In the meantime, please make sure that you've provided all the necessary details to help us understand and address the issue effectively.

Feel free to contribute and participate in discussions!

[Jialecl]

Hello @DirkBaumannDXC,
First, thanks for opening the issue. While we understand your point, we believe there's some value in keeping this flexible rather than enforcing the use of a specific date provider. Another topic is that even in MUI case the internationalization is handled by a provider and not the date component itself. That said, we do agree that the date input component could improve its localization features, so if you have any suggestions or feedback in that area, we’d love to hear them.

[DirkBaumannDXC]

So my suggestion is to support (already existing MUI) date adapters like it is done by the MUI Date Picker or provide some kind of "Halstack date adapter". May be to specify the adapter and the locale you could extend the Halstack Provider with something like the props "dateAdapter" and "adapterLocale".

At least the user of the halstack Date Widget should only provide the locale, but not the date formats for all locales.

The date adapter should support something like "Localized formats" at Day.js (https://day.js.org/docs/en/display/format#localized-formats), so the user just can specify what "kind of format" (e.g. short, long, with or without time) he wants and the adapter provides the format for every locale.

I assume providing some support/integration for Day.js (or a different date library) in Halstack would be more useful than trying to reimplement something similar in Halstack.

But may be I'm completely wrong and instead of extending Halstack we just require a good example how to integrate something like Day.js with the Halstack Date Widget.

[Jialecl]

I do understand the pros of what you are explaining but there are still questions that we need to discuss about that approach.
For example you select "en-US" that means that the format can be "mm-dd-yyyy" but also "mm/dd/yy".

But I do think we can think of a provider to make everything easier or maybe an example on how to implement it.

[Jialecl]

Hello @DirkBaumannDXC ,

Here is an example of a function that returns the format based on the locale of the browser:

function getLocaleDateFormatPattern(locale = navigator.language) {
  const formatter = new Intl.DateTimeFormat(locale, {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
  });

  const date = formatter.formatToParts(new Date(1995, 11, 3));

  return date
    .map((part) => {
      if (part.type === "day") return "dd";
      if (part.type === "month") return "MM";
      if (part.type === "year") return "yyyy";
      return part.value;
    })
    .join("");
}

It will return "dd/MM/yyyy" for the locale es-ES and "dd.MM.yyyy" for the locale de-DE.
I hope you found this useful.

[github-actions]

This issue is stale because it has been open for 15 days with no activity. If there are no further updates or modifications within the next 15 days, it will be automatically closed.

[github-actions]

This issue has been closed as it has been inactive for 15 days since being marked as stale.