Fix date format to respect user profile settings using date-fns (#22900)

[ellegamee]

Proposed change

This PR refactors the date formatting logic to ensure that the user's date format preference (DMY, MDY, or YMD) is consistently respected across the frontend.

Technical Highlights:

Standardized Pattern: Introduced a helper function formatForDatePreference that maps the user's date_format setting to specific date-fns patterns.

Improved Maintainability: Replaced custom string-building logic and redundant memoizeOne calls with a cleaner, consistent pattern using date-fns directly, as recommended by maintainers from #24935

Timezone Consistency: Extracted timezone resolution into a dedicated toTimeZone helper to ensure dates are correctly offset before formatting.

Screenshots

YMD:

MDY:

DMY:

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Additional information

• This PR fixes or closes issue: fixes Date format is not respected #22900
• This PR is related to issue or discussion:
• Link to documentation pull request:
• Link to developer documentation pull request:
• Link to backend pull request:

Checklist

• I understand the code I am submitting and can explain how it works.
• The code change is tested and works locally.
• There is no commented out code in this PR.
• I have followed the development checklist
• I have followed the perfect PR recommendations
• Any generated code has been carefully reviewed for correctness and compliance with project standards.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

To help with the load of incoming pull requests:

• I have reviewed two other open pull requests in this repository.

[ildar170975]

Have not checked the code, but imho a month should not be written as a “name”, ie “Y-M-D” should be “2026-09-23” (where leading zeroes are locale-dependent).

[ellegamee]

Have not checked the code, but imho a month should not be written as a “name”, ie “Y-M-D” should be “2026-09-23” (where leading zeroes are locale-dependent).

Yes. The month should not be written as a "name" with the Y-M-D format. The component in the image does use a different format based upon YMD in this case.

I chose to write it in this way as that's how the user settings are describing the different settings.

Each card, element or text decides what format they want to display.

[MindFreeze]

This loses locale-based month/weekday names. Intl.DateTimeFormat(locale.language, {...}) produced localized month and weekday names. date-fns's format defaults to English month/weekday names.

The old implementations wrapped the Intl.DateTimeFormat constructor in memoizeOne, so repeated calls with the same locale reused the same formatter. The new code creates a TZDate and re-parses the format string on every call.

[home-assistant]

Please take a look at the requested changes, and use the Ready for review button when you are done, thanks 👍

Learn more about our pull request process.