Skip to content

fix(NcDateTimePicker): use translated words in dates formatted with a format string#8644

Open
odzhychko wants to merge 1 commit into
mainfrom
NcDateTimePicker-translated-words-in-date-formatted-with-format-string
Open

fix(NcDateTimePicker): use translated words in dates formatted with a format string#8644
odzhychko wants to merge 1 commit into
mainfrom
NcDateTimePicker-translated-words-in-date-formatted-with-format-string

Conversation

@odzhychko

@odzhychko odzhychko commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

Given:

  • user with locale "de-DE"
  • NcDateTimePicker
    • with format prop "yyyy MMM dd"

Expect:

  • Text content is "2000 Okt. 02"

Actual:

  • Input content is "2000 Okt. 02"

☑️ Resolves

If a format string is provided, the component now uses the user defined locale to use translated names of month, weekday etc.

🖼️ Screenshots

🏚️ Before 🏡 After
image image

🚧 Tasks

  • ...

🏁 Checklist

  • ⛑️ Tests are included or are not applicable
  • 📘 Component documentation has been extended, updated or is not applicable
  • 2️⃣ Backport to stable8 for maintained Vue 2 version or not applicable

Notes

This fix is a byproduct of loading locales from data-fns/locale, which I intent to use in fixing #8639 (in PR #8657)
I opened this PR to make the review easier and get feedback faster.

The loading of date-fns/locales is the bulk of the PR.
Loading those locales seemed to be a blocker in #7767 (comment)

if (localeCode === 'be-tarask') {
exportName = 'beTarasak'
}
content += `loader['${localeCode}'] = async () => (await import('date-fns/locale/${localeCode}')).${exportName}\n`

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Generated module looks like this.

const loader = {};
loader["af"] = async () => (await import("date-fns/locale/af")).af;
loader["ar-DZ"] = async () => (await import("date-fns/locale/ar-DZ")).arDZ;
...
loader["zh-HK"] = async () => (await import("date-fns/locale/zh-HK")).zhHK;
loader["zh-TW"] = async () => (await import("date-fns/locale/zh-TW")).zhTW;

@odzhychko odzhychko Jun 16, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

It tested it with Vite and Rspack apps.

Comment thread vite.config.ts
nodeExternalsOptions: {
// Packages with paths imports should be added here to mark them as external as well
include: [/^@nextcloud\/.+\//, /^@mdi\/svg\//],
include: [/^@nextcloud\/.+\//, /^@mdi\/svg\//, /^date-fns\/locale\//],

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Externalized as suggested in #7767 (comment)

@codecov

codecov Bot commented Jun 16, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 54.06%. Comparing base (c77e363) to head (20e1809).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #8644   +/-   ##
=======================================
  Coverage   54.06%   54.06%           
=======================================
  Files         106      106           
  Lines        3479     3479           
  Branches     1009     1009           
=======================================
  Hits         1881     1881           
  Misses       1354     1354           
  Partials      244      244           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@odzhychko odzhychko force-pushed the NcDateTimePicker-translated-words-in-date-formatted-with-format-string branch from 1fc990a to 427346d Compare June 16, 2026 14:02
@odzhychko odzhychko requested review from GVodyanov, ShGKme and susnux June 16, 2026 14:02
@odzhychko odzhychko added the 3. to review Waiting for reviews label Jun 17, 2026
@susnux susnux added this to the 9.8.3 milestone Jun 22, 2026

<template>
<div class="vue-date-time-picker__wrapper">
<!-- Setting :key="dateFnsLocaleCode" forces the component to rerender when `:formatLocale` changes.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is there an upstream bug report for this? If not please create one when adding such a work-around

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Done. I Created an issue upstream and added a link.
Also simplified the workaround by removing an intermediate computed var.

(...I got lazy there because we are behind a few major versions, and I just assumed it's probably fixed. But no, the issue persists in the most recent version too.)

@susnux susnux added the bug Something isn't working label Jun 22, 2026
@odzhychko odzhychko force-pushed the NcDateTimePicker-translated-words-in-date-formatted-with-format-string branch 2 times, most recently from d25f659 to 20a290a Compare June 23, 2026 06:11
@odzhychko odzhychko requested a review from susnux June 23, 2026 06:30
@odzhychko odzhychko added the feature: datepicker Related to the date/time picker component label Jun 26, 2026
@odzhychko odzhychko force-pushed the NcDateTimePicker-translated-words-in-date-formatted-with-format-string branch from 20a290a to b2b9764 Compare June 29, 2026 08:37
… format string

Signed-off-by: Oleksandr Dzhychko <hey@oleks.dev>
@odzhychko odzhychko force-pushed the NcDateTimePicker-translated-words-in-date-formatted-with-format-string branch from b2b9764 to 20e1809 Compare June 29, 2026 08:45
@susnux susnux modified the milestones: 9.8.3, 9.9.0 Jul 1, 2026
@odzhychko

Copy link
Copy Markdown
Contributor Author

@susnux @ShGKme Would you be able to review this again when you have time?

@ChristophWurst ChristophWurst requested a review from hamza221 July 14, 2026 07:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

3. to review Waiting for reviews bug Something isn't working feature: datepicker Related to the date/time picker component

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants