fix(NcDateTimePicker): handle text input for default formatting by odzhychko · Pull Request #8657 · nextcloud-libraries/nextcloud-vue

odzhychko · 2026-06-19T14:07:00Z

Handle text input when default formatting is used.

I tried not to change the existing formatting.
But the default formatting needed to change to accommodate the used parsing solution (locale information available in date-fns/locale)

Notable changes in the formatting are:

changing separator between date and time for some languages
e.g., "02.01.2000, 03:04" becomes "02.01.2000 03:04" for "de" (comma is removed)
no shortened form for duration
e.g., "Jan 1 – 7, 2000" becomes "Jan 1, 2000 - Jan 7, 2000" for "en-US"
"-" becomes the delimiter for duration instead of "–"
some languages use simplified/fallback local forms
- e.g.,"2000年1月2日 03:04" becomes "Jan 2, 2000, 3:04 AM" for Chinese "zh"
- e.g., "١‏/١‏/٢٠٠٠ – ٧‏/١‏/٢٠٠٠" becomes "1 يناير 2000 - 7 يناير 2000" for Arabic (Bahrain) "ar-BH"

This could be considered a breaking change, because things are now displayed differently.
But it could also be considered not to be breaking, because we still display the same information but in a new format, that is improved to accommodate text input. I consider it non-breaking and better than not allowing text input.

More details on how we could accommodate parsing without changing the preview format at all can be found in #8657 (comment)

☑️ Resolves

Fix [NcDateTimePicker]: text input gets discarded since v9 #8635

🖼️ Screenshots

Before

Screencast.from.2026-06-03.16-17-41.webm

After

Screencast.from.2026-06-03.16-16-14.webm

🚧 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

codecov · 2026-06-19T14:10:45Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 53.31%. Comparing base (0dad83c) to head (0a44a84).
⚠️ Report is 5 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8657   +/-   ##
=======================================
  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.

odzhychko · 2026-06-19T14:30:37Z

+//
+// One big snapshot test to not infalte number of test cases.
+// This keeps reporting clean and runs faster.
+test('all locales format', async ({ mount }) => {


Do you want to keep this snapshots tests?

I found them useful when developing to understand the:

edge cases related to different locales (and sometimes browsers)

impact of formatting changes

e.g., by diffing them between the two commits of this PR

we probably expect them to fail for certain languages? so we can maybe limit snapshots to these one, to not commit 15K lines?

odzhychko · 2026-06-23T06:29:37Z

-		return (input: Date | [Date, Date]) => Array.isArray(input)
-			? formatter.formatRange(input[0], input[1])
-			: formatter.format(input)
+	switch (props.type) {


If we get Vuepic/vue-datepicker#1286 fixed update to a newer versions of Vuepic, we can use textInput.format to specify a format that only applies when the user focuses the input.

With that, we could keep using Intl.DateTimeFormat for formatting the text that is shown by default. And with that, do not change the behavior at all.

So the decision would be between:

Using same format for preview and input

Drawbacks

for some languages, the format changes (compared to impl. on main)

e.g., "02.01.2000, 03:04" becomes "02.01.2000 03:04" for "de" (comma is removed)

no shortend form for durations

e.g., "Jan 1 – 7, 2000" becomes "Jan 1, 2000 - Jan 7, 2000" for "en-US"

Using different (but mostly similar) for formats for preview and input

Drawbacks

Text input changes/flickers when use focuses/leaves the text input

This PR implements solution 1..
Solution 2. would be blocked by Vuepic/vue-datepicker#1286

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

For some locales, the default formatting changes to accommodate the used parsing solution. Fixes #8635 Signed-off-by: Oleksandr Dzhychko <hey@oleks.dev>

kra-mo

Not an expert in localization specifically, it looks good from what I understand, so unless someone else has feedback, consider it approved from the design side.

odzhychko · 2026-08-07T11:12:10Z

@hamza221 Sorry, merged without noticing that you requested a review from @Antreesy .

Let me know, if I'm to rollback this merge.

Antreesy · 2026-08-07T11:12:38Z

I'll check now, maybe it's okay)

Antreesy

code change itself it fine IMO

Antreesy · 2026-08-07T11:33:40Z

+//
+// One big snapshot test to not infalte number of test cases.
+// This keeps reporting clean and runs faster.
+test('all locales format', async ({ mount }) => {


we probably expect them to fail for certain languages? so we can maybe limit snapshots to these one, to not commit 15K lines?

Antreesy · 2026-08-07T11:34:42Z

we can maybe keep it as .json file - Vite/Playwright should support importing and using it fine?

I thought about it again. I think we can limit it now to the locales supported by date-fns. Including all locales supported by Nextcloud was only interesting from the migration from Intl.DateFormat to localization by date-fns.

Applied in #8825 (removes ~20k lines from snapshots)

odzhychko · 2026-08-07T12:56:38Z

we probably expect them to fail for certain languages? so we can maybe limit snapshots to these one, to not commit 15K lines?

@Antreesy No, none of them is expected to fail immediately. They should only fail if the formatting changes. This can happen if (a) the date-fns package is update and changes locales or (b) we start reworking local formatting again. In both cases, it helps with tracking what actually changed in between versions.

But I did what is described in #8657 (comment)

Antreesy · 2026-08-07T13:14:42Z

They should only fail if the formatting changes.

What I meant under 'language that fails' is more 'language that caused issues on parsing'. But agree in general that limiting to date-fns available locales sounds ok to me. By the diff, I see that some secondary locales were dropped from snapshots, they would probably fall back to more generic locales anyway

github-advanced-security AI found potential problems Jun 19, 2026

View reviewed changes

Comment thread src/components/NcDateTimePicker/format.ts Fixed

odzhychko commented Jun 19, 2026

View reviewed changes

Comment thread src/components/NcDateTimePicker/useDateFnsLocale.ts Outdated

odzhychko commented Jun 19, 2026

View reviewed changes

odzhychko force-pushed the 8635-NcDateTimePicker-text-input branch from 496104b to 9a35785 Compare June 19, 2026 14:33

odzhychko mentioned this pull request Jun 22, 2026

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

Merged

4 tasks

odzhychko added bug Something isn't working 2. developing Work in progress labels Jun 23, 2026

odzhychko commented Jun 23, 2026

View reviewed changes

Comment thread src/components/NcDateTimePicker/NcDateTimePicker.vue

odzhychko commented Jun 23, 2026

View reviewed changes

Comment thread src/components/NcDateTimePicker/NcDateTimePicker.vue Outdated

odzhychko commented Jun 23, 2026

View reviewed changes

odzhychko force-pushed the 8635-NcDateTimePicker-text-input branch from 9a35785 to f103fd8 Compare June 23, 2026 12:43

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

odzhychko force-pushed the 8635-NcDateTimePicker-text-input branch from f103fd8 to 141b4e8 Compare June 29, 2026 08:51

odzhychko force-pushed the 8635-NcDateTimePicker-text-input branch from 141b4e8 to e416fa9 Compare July 30, 2026 08:34

test(NcDateTimePicker): add snapshot tests for localized formatting

349b8cc

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

odzhychko force-pushed the 8635-NcDateTimePicker-text-input branch from e416fa9 to 30ff669 Compare July 30, 2026 08:54

fix(NcDateTimePicker): handle text input for default formatting

0a44a84

For some locales, the default formatting changes to accommodate the used parsing solution. Fixes #8635 Signed-off-by: Oleksandr Dzhychko <hey@oleks.dev>

odzhychko force-pushed the 8635-NcDateTimePicker-text-input branch from 30ff669 to 0a44a84 Compare July 30, 2026 09:00

odzhychko marked this pull request as ready for review July 30, 2026 09:51

odzhychko requested review from GVodyanov, ShGKme, hamza221 and susnux July 30, 2026 09:51

odzhychko added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Aug 3, 2026

ShGKme added this to the 9.9.1 milestone Aug 4, 2026

odzhychko mentioned this pull request Aug 4, 2026

feat(NcDateTimePicker): manual date input #8443

Closed

3 tasks

odzhychko requested a review from kra-mo August 6, 2026 10:35

kra-mo approved these changes Aug 6, 2026

View reviewed changes

hamza221 approved these changes Aug 7, 2026

View reviewed changes

hamza221 requested a review from Antreesy August 7, 2026 11:05

odzhychko merged commit 5f6ae35 into main Aug 7, 2026
29 checks passed

odzhychko deleted the 8635-NcDateTimePicker-text-input branch August 7, 2026 11:09

odzhychko restored the 8635-NcDateTimePicker-text-input branch August 7, 2026 11:12

Antreesy reviewed Aug 7, 2026

View reviewed changes

odzhychko mentioned this pull request Aug 7, 2026

test(NcDateTimePicker): shrink number of locales for the snapshot test case #8825

Open

3 tasks

Uh oh!

Conversation

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

Uh oh!

☑️ Resolves

🖼️ Screenshots

Before

After

🚧 Tasks

🏁 Checklist

Uh oh!

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

Uh oh!

odzhychko Jun 19, 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!

Antreesy Aug 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

odzhychko Jun 23, 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 Jul 30, 2026

Choose a reason for hiding this comment

Uh oh!

kra-mo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

odzhychko commented Aug 7, 2026

Uh oh!

Antreesy commented Aug 7, 2026

Uh oh!

Antreesy left a comment

Choose a reason for hiding this comment

Uh oh!

Antreesy Aug 7, 2026

Choose a reason for hiding this comment

Uh oh!

Antreesy Aug 7, 2026

Choose a reason for hiding this comment

Uh oh!

odzhychko Aug 7, 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 commented Aug 7, 2026

Uh oh!

Antreesy commented Aug 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

odzhychko commented Jun 19, 2026 •

edited

Loading

codecov Bot commented Jun 19, 2026 •

edited

Loading

odzhychko Jun 19, 2026 •

edited

Loading

odzhychko Jun 23, 2026 •

edited

Loading

odzhychko Aug 7, 2026 •

edited

Loading