fix(NcDateTimePicker): use translated words in dates formatted with a format string by odzhychko · Pull Request #8644 · nextcloud-libraries/nextcloud-vue

odzhychko · 2026-06-16T13:56:01Z

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

🚧 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)

odzhychko · 2026-06-16T13:57:14Z

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


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;

It tested it with Vite and Rspack apps.

odzhychko · 2026-06-16T13:58:42Z

 		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\//],


Externalized as suggested in #7767 (comment)

codecov · 2026-06-16T13:59:05Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 53.31%. Comparing base (24ff9d5) to head (007171b).
⚠️ Report is 4 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8644   +/-   ##
=======================================
  Coverage   53.31%   53.31%           
=======================================
  Files         109      109           
  Lines        3697     3697           
  Branches     1083     1082    -1     
=======================================
  Hits         1971     1971           
  Misses       1472     1472           
  Partials      254      254

☔ 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.

susnux · 2026-06-22T21:54:27Z


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


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

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.)

odzhychko · 2026-07-06T09:12:44Z

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

GVodyanov

Tested with Italian and code looks good!

susnux

seems to work fine locally

susnux · 2026-07-27T15:45:44Z

One note here: This will increase bundle sizes of such apps a lot.
We might need to consider to reduce list of locales to those provided by server

… format string Signed-off-by: Oleksandr Dzhychko <hey@oleks.dev>

odzhychko · 2026-07-28T10:53:27Z

We might need to consider to reduce list of locales to those provided by server

The problem with that is that the server allows ~750 locales.
https://github.com/nextcloud/server/blob/master/resources/locales.json

Almost any dateFns-locale has a corresponding server locale.

One idea i had was to load it for the set locale as we load translations only for the set language.

https://github.com/nextcloud/server/blob/1c8037712d3dc6a15d6125169b92a68bd562bc02/lib/public/Util.php#L207-L222

But that would require new server code...

My preferred solution to reduce bundle size is to construct a dateFns-locale at runtime by extracting the required data by poking at the formatting outputs of Intl.DateTime

For example, https://tempo.formkit.com/#format-str can extract the format rather reliably from some calls to Intl.DateTime.
And https://tempo.formkit.com/#range can extract month and weekday names.

But I thought of that as being too complex for now. I keep it in mind if bundle size becomes a concern for a concrete app.

susnux · 2026-07-28T10:59:07Z

The problem with that is that the server allows ~750 locales.

No not really, because this is not about locale itself its translated words.
So this adds translation not localization so server has far less options.

e.g. its common to configure

language: English
locale: German

The expected formatting would be to have DD. MM. YYYY instead of MM / DD / YYYY but still get e.g. 3rd July instead of 3. Juli.

odzhychko · 2026-07-30T09:55:09Z

No not really, because this is not about locale itself its translated words. So this adds translation not localization so server has far less options.

Uh, I haven't thought about that.

Locale objects directly provided by dateFns assume the language is the same as the locale.
Our current default localization with Intl.DateTimeFormat also just uses the language from the locale and not the actually configured language.

It should be possible to combine the dateFns-locale object for the nextcloud-locale with the dateFns-locale object for the nextcloud-language. Something like { ...de, localize: enUS.localize, match: enUS.match }.

I would consider trying that out after #8657

odzhychko commented Jun 16, 2026

View reviewed changes

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 requested review from GVodyanov, ShGKme and susnux June 16, 2026 14:02

odzhychko added the 3. to review Waiting for reviews label Jun 17, 2026

odzhychko mentioned this pull request Jun 22, 2026

fix(NcDateTimePicker): handle text input for default formatting #8657

Merged

3 tasks

susnux added this to the 9.8.3 milestone Jun 22, 2026

susnux reviewed Jun 22, 2026

View reviewed changes

susnux added the bug Something isn't working label Jun 22, 2026

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 requested a review from susnux June 23, 2026 06:30

odzhychko added the feature: datepicker Related to the date/time picker component label Jun 26, 2026

odzhychko force-pushed the NcDateTimePicker-translated-words-in-date-formatted-with-format-string branch 2 times, most recently from b2b9764 to 20e1809 Compare June 29, 2026 08:45

susnux modified the milestones: 9.8.3, 9.9.0 Jul 1, 2026

ChristophWurst requested a review from hamza221 July 14, 2026 07:53

Antreesy modified the milestones: 9.9.0, 9.9.1 Jul 18, 2026

GVodyanov approved these changes Jul 23, 2026

View reviewed changes

susnux approved these changes Jul 27, 2026

View reviewed changes

fix(NcDateTimePicker): use translated words in dates formatted with a…

007171b

… format string Signed-off-by: Oleksandr Dzhychko <hey@oleks.dev>

odzhychko force-pushed the NcDateTimePicker-translated-words-in-date-formatted-with-format-string branch from 20e1809 to 007171b Compare July 28, 2026 08:23

odzhychko merged commit 865253a into main Jul 28, 2026
27 checks passed

odzhychko deleted the NcDateTimePicker-translated-words-in-date-formatted-with-format-string branch July 28, 2026 10:09

Uh oh!

Conversation

odzhychko commented Jun 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

☑️ Resolves

🖼️ Screenshots

🚧 Tasks

🏁 Checklist

Notes

Uh oh!

odzhychko Jun 16, 2026

Choose a reason for hiding this comment

Uh oh!

odzhychko Jun 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

odzhychko Jun 16, 2026

Choose a reason for hiding this comment

Uh oh!

codecov Bot commented Jun 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

susnux Jun 22, 2026

Choose a reason for hiding this comment

Uh oh!

odzhychko Jun 23, 2026

Choose a reason for hiding this comment

Uh oh!

odzhychko commented Jul 6, 2026

Uh oh!

GVodyanov left a comment

Choose a reason for hiding this comment

Uh oh!

susnux left a comment

Choose a reason for hiding this comment

Uh oh!

susnux commented Jul 27, 2026

Uh oh!

Uh oh!

odzhychko commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

susnux commented Jul 28, 2026

Uh oh!

odzhychko commented Jul 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

odzhychko commented Jun 16, 2026 •

edited

Loading

odzhychko Jun 16, 2026 •

edited

Loading

codecov Bot commented Jun 16, 2026 •

edited

Loading

odzhychko commented Jul 28, 2026 •

edited

Loading