Skip to content

fix(date, date-range): ensure date format override returns correct formatted value #7359

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 9, 2025

Conversation

nuria1110
Copy link
Contributor

fix #7345

Proposed behaviour

  • Both dateFormatOverride prop and translation key can be used, with the prop taking precedence.
  • Format override is respected regardles of default locale format.
Screen.Recording.2025-06-02.at.16.57.54.mov

Current behaviour

  • dateFormatOverride prop has no effect.
  • When using the dateFormatOverride translation key, it fails to format values correctly and parse correct raw value for the onChange event, specially when the day and month are flipped.

Using de-DE locale:

Screen.Recording.2025-06-02.at.16.50.50.mov

Checklist

  • Commits follow our style guide
  • Related issues linked in commit messages if required
  • Screenshots are included in the PR if useful
  • All themes are supported if required
  • Unit tests added or updated if required
  • Playwright automation tests added or updated if required
  • Storybook added or updated if required
  • Translations added or updated (including creating or amending translation keys table in storybook) if required
  • Typescript d.ts file added or updated if required
  • Related docs have been updated if required

QA

  • Tested in provided StackBlitz sandbox/Storybook
  • Add new Playwright test coverage if required
  • Carbon implementation matches Design System/designs
  • UI Tests GitHub check reviewed if required

Additional context

Testing instructions

  • Can be tested in i18n Story test story in storybook and changing the dateFormatOverride, see actions for returned formatted and raw values.
  • Separator formatting should also be supported with format override: e.g. 03-06-2019 should update to 03/06/2019 if date format is dd/MM/yyyy.

Copy link
Contributor Author

@nuria1110 nuria1110 Jun 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like James was correct here and we should be generating the list of formats to match from the override string and not from the locale format, which is what was causing the mismatch when day and month values were swapped.

@Parsium Parsium self-requested a review June 3, 2025 08:31
@edleeks87 edleeks87 self-requested a review June 3, 2025 09:10
Parsium
Parsium previously approved these changes Jun 4, 2025
"de-DE": de,
};

export const I18NStory = ({ locale, ...args }: DateInputI80NProps) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

praise: nice idea using Storybook Controls to change the locale for testing 👍

…rmatted value

When overridding the default date format, the format was not always respected and would switch to
the default in some cases where the day and month were flipped.

fix #7345
@Parsium Parsium marked this pull request as ready for review June 5, 2025 13:23
@Parsium Parsium requested review from a team as code owners June 5, 2025 13:23
@nuria1110 nuria1110 merged commit 60e51c4 into master Jun 9, 2025
28 checks passed
@nuria1110 nuria1110 deleted the FE-7268 branch June 9, 2025 10:09
@carbonci
Copy link
Collaborator

carbonci commented Jun 9, 2025

🎉 This PR is included in version 154.7.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

Custom date format is changing date swapping day and month
5 participants