fix(NcDateTimePicker): handle text input for default formatting#8657
fix(NcDateTimePicker): handle text input for default formatting#8657odzhychko wants to merge 3 commits into
Conversation
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8657 +/- ##
=======================================
Coverage 54.06% 54.06%
=======================================
Files 106 106
Lines 3479 3479
Branches 1009 1008 -1
=======================================
Hits 1881 1881
Misses 1354 1354
Partials 244 244 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
| * | ||
| * @param locale locale code (e.g., 'de-DE') | ||
| */ | ||
| export default function useDateFnsLocale(locale: MaybeRefOrGetter<string>): Ref<Locale> { |
There was a problem hiding this comment.
Instead of loading locales, we could construct them by:
- using tokens from https://github.com/nextcloud-libraries/nextcloud-l10n/blob/main/lib/date.ts
-
translation for tokens not yet in nextcloud-l10n (e.g., quarters and genitive case for month names) could have some fallback logic or be added to be translated
-
also we might want to disable implicit support for tokens that are specific to
date-fns-
These patterns are not in the Unicode Technical Standard #5:
- ...
- o: ordinal number modifier
- ...
-
-
- and extracting format strings with
parseFormatForOptsfor{ dateStyle: 'medium' }and{ dateStyle: 'short' }
But that would require more code to get right, so I went with the build in locales for now.
| // | ||
| // One big snapshot test to not infalte number of test cases. | ||
| // This keeps reporting clean and runs faster. | ||
| test('all locales format', async ({ mount }) => { |
There was a problem hiding this comment.
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 commits 496104b#diff-1a32676698d3fe67be5033c05675562c576c362d840eda12e6e35bec26c6cf78
odzhychko
force-pushed
the
8635-NcDateTimePicker-text-input
branch
from
496104b to
9a35785
Compare
| return (input: Date | [Date, Date]) => Array.isArray(input) | ||
| ? formatter.formatRange(input[0], input[1]) | ||
| : formatter.format(input) | ||
| switch (props.type) { |
There was a problem hiding this comment.
If we get #8657 (comment) fixed (or update to a version that fixes it) and the feature is still available in 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 (see https://github.com/nextcloud-libraries/nextcloud-vue/commit/496104b2a73ac3783989622256525dc8e3804c1f#diff-1a32676698d3fe67be5033c05675562c576c362d840eda12e6e35bec26c6cf78)
- for some languages, the preview changes
- e.g., "02.01.2000, 03:04" becomes "02.01.2000 03:04" for "de" (comma is removed)
- no shortend form for durations in preview
- e.g., "Jan 1 – 7, 2000" becomes "Jan 1, 2000 - Jan 7, 2000" for "en-US"
- for some languages, the preview changes
- Drawbacks (see https://github.com/nextcloud-libraries/nextcloud-vue/commit/496104b2a73ac3783989622256525dc8e3804c1f#diff-1a32676698d3fe67be5033c05675562c576c362d840eda12e6e35bec26c6cf78)
- Using different (but mostly similar) for formats for preview and input
- Drawbacks
- Text input changes/flickers when use focuses/leaves the text input
- Drawbacks
odzhychko
force-pushed
the
8635-NcDateTimePicker-text-input
branch
from
9a35785 to
f103fd8
Compare
odzhychko
added
the
feature: datepicker
… format string Signed-off-by: Oleksandr Dzhychko <hey@oleks.dev>
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>
odzhychko
force-pushed
the
8635-NcDateTimePicker-text-input
branch
from
f103fd8 to
141b4e8
Compare
2 participants
Handle text input when default formatting is used.
I tried not to change the existing formatting.
But some locales, the default formatting changed to accommodate the used parsing solution (locale information available in
date-fns/locale)Builds upon #8644.
Waiting for #8644 to be merged, to remove the Draft status.
Code is still close to the final proposed fixed and might help understanding the changes in #8644.
☑️ Resolves
🖼️ Screenshots
Before
Screencast.from.2026-06-03.16-17-41.webm
After
Screencast.from.2026-06-03.16-16-14.webm
🚧 Tasks
🏁 Checklist
stable8for maintained Vue 2 version or not applicable