Merge pull request #6723 from nextcloud-libraries/fix/localize-format-date-time-picker

fix(NcDateTimePicker): localize the default formatting

Author: susnux

src/components/NcDateTimePicker/NcDateTimePicker.vue

@@ -215,7 +215,8 @@ const props = withDefaults(defineProps<{
 
 	/**
 	 * Preview format for the picker input field.
-	 * @default 'yyyy-MM-dd HH:mm'
+	 *
+	 * @default Intl.DateTimeFormat is used to format dates and times
 	 * @see https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
 	 */
 	format?: string
@@ -335,20 +336,37 @@ const placeholderFallback = computed(() => {
 	return t('Select date and time')
 })
 
+/**
+ * The date (time) formatting to be used by the library.
+ * We use the provided format if possible, otherwise we provide a formatting function
+ * which uses the browsers Intl API to format the date / time in the current users locale.
+ */
 const realFormat = computed(() => {
 	if (props.format) {
 		return props.format
-	} else if (props.type === 'datetime' || props.type === 'range-datetime') {
-		return 'yyyy-MM-dd HH:mm'
-	} else if (props.type === 'date' || props.type === 'range') {
-		return 'yyyy-MM-dd'
 	} else if (props.type === 'week') {
+		// cannot format weeks with Intl.
 		return 'RR-II'
+	}
+
+	let formatter: Intl.DateTimeFormat | undefined
+	if (props.type === 'datetime' || props.type === 'range-datetime') {
+		formatter = new Intl.DateTimeFormat(getCanonicalLocale(), { dateStyle: 'medium', timeStyle: 'short' })
+	} else if (props.type === 'date' || props.type === 'range') {
+		formatter = new Intl.DateTimeFormat(getCanonicalLocale(), { dateStyle: 'medium' })
 	} else if (props.type === 'month') {
-		return 'yyyy-MM'
+		formatter = new Intl.DateTimeFormat(getCanonicalLocale(), { year: 'numeric', month: '2-digit' })
 	} else if (props.type === 'year') {
-		return 'yyyy'
+		formatter = new Intl.DateTimeFormat(getCanonicalLocale(), { year: 'numeric' })
 	}
+
+	if (formatter) {
+		return (input: Date | [Date, Date]) => Array.isArray(input)
+			? formatter.formatRange(...input)
+			: formatter.format(input)
+	}
+
+	// fallback to default formatting
 	return undefined
 })
 

tests/component/components/NcDateTimePicker.spec.ts

@@ -18,13 +18,13 @@ test('aria-label set on input element', async ({ mount, page }) => {
 })
 
 const testcases = [
-	['datetime', new Date(2000, 0, 2, 3, 4), '2000-01-02 03:04'],
-	['date', new Date(2000, 0, 2, 3, 4), '2000-01-02'],
+	['datetime', new Date(2000, 0, 2, 3, 4), 'Jan 2, 2000, 3:04 AM'],
+	['date', new Date(2000, 0, 2, 3, 4), 'Jan 2, 2000'],
 	['week', new Date(2000, 0, 2, 3, 4), '1999-52'],
-	['month', new Date(2000, 0, 2, 3, 4), '2000-01'],
+	['month', new Date(2000, 0, 2, 3, 4), '01/2000'],
 	['year', new Date(2000, 0, 2, 3, 4), '2000'],
-	['range', [new Date(2000, 0, 1), new Date(2000, 0, 7)] as [Date, Date], '2000-01-01 - 2000-01-07'],
-	['range-datetime', [new Date(2000, 0, 1, 2, 3), new Date(2000, 0, 7, 8, 9)] as [Date, Date], '2000-01-01 02:03 - 2000-01-07 08:09'],
+	['range', [new Date(2000, 0, 1), new Date(2000, 0, 7)] as [Date, Date], /Jan 1\s–\s7, 2000/i],
+	['range-datetime', [new Date(2000, 0, 1, 2, 3), new Date(2000, 0, 7, 8, 9)] as [Date, Date], /Jan 1, 2000, 2:03\sAM\s–\sJan 7, 2000, 8:09\sAM/i],
 ] as const
 
 for (const [type, modelValue, expectedValue] of testcases) {
@@ -40,6 +40,26 @@ for (const [type, modelValue, expectedValue] of testcases) {
 	})
 }
 
+const l10nTestcases = [
+	['datetime', new Date(2000, 0, 2, 3, 4), 'en-GB', '2 Jan 2000, 03:04'],
+	['date', new Date(2000, 0, 2, 3, 4), 'es-ES', '2 ene 2000'],
+	['month', new Date(2000, 0, 2, 3, 4), 'de-DE', '01.2000'],
+] as const
+
+for (const [type, modelValue, locale, expectedValue] of l10nTestcases) {
+	test(`Handle localized formatting for date with type: ${type} formatted in locale ${locale}`, async ({ mount, page }) => {
+		page.addScriptTag({ content: `document.getElementsByTagName('html')[0].dataset.locale = "${locale}";` })
+		await mount(NcDateTimePicker, {
+			props: {
+				modelValue,
+				type,
+			},
+		})
+
+		await expect(page.getByRole('textbox')).toHaveValue(expectedValue)
+	})
+}
+
 test('Today is selected by default', async ({ mount, page }) => {
 	await page.clock.setSystemTime(new Date(2000, 0, 22))
 
@@ -49,7 +69,7 @@ test('Today is selected by default', async ({ mount, page }) => {
 		},
 	})
 
-	await expect(page.getByRole('textbox')).toHaveValue('2000-01-22')
+	await expect(page.getByRole('textbox')).toHaveValue('Jan 22, 2000')
 
 	// see also menu is checked
 	await page.getByRole('textbox').click()