Merge pull request #5501 from nextcloud-libraries/fix/date-time-lang

fix(NcDateTime): Respect language

src/composables/useFormatDateTime.ts

@@ -20,7 +20,7 @@
  *
  */
 
-import { getCanonicalLocale } from '@nextcloud/l10n'
+import { getCanonicalLocale, getLanguage } from '@nextcloud/l10n'
 import { computed, onUnmounted, ref, onMounted, watch, unref, type Ref } from 'vue'
 import { t } from '../l10n.js'
 
@@ -48,7 +48,7 @@ interface FormatDateOptions {
 type MaybeRef<T> = T | Ref<T>
 
 /**
- * Composable for formatting time stamps using current users locale
+ * Composable for formatting time stamps using current users locale and language
  *
  * @param {Date | number | import('vue').Ref<Date> | import('vue').Ref<number>} timestamp Current timestamp
  * @param {object} opts Optional options
@@ -87,7 +87,7 @@ export function useFormatDateTime(
 	/** Time string formatted for main text */
 	const formattedTime = computed<string>(() => {
 		if (wrappedOptions.value.relativeTime !== false) {
-			const formatter = new Intl.RelativeTimeFormat(getCanonicalLocale(), { numeric: 'auto', style: wrappedOptions.value.relativeTime })
+			const formatter = new Intl.RelativeTimeFormat(getLanguage(), { numeric: 'auto', style: wrappedOptions.value.relativeTime })
 
 			const diff = date.value.getTime() - currentTime.value
 			const seconds = diff / 1000

tests/unit/components/NcDateTime/NcDateTime.spec.js

@@ -84,7 +84,7 @@ describe('NcDateTime.vue', () => {
 		/**
 		 * Use German locale as it uses a different date format than English
 		 */
-		it('', () => {
+		it('Works with absolute timestamps', () => {
 			const time = Date.UTC(2023, 5, 23, 14, 30)
 			jest.setSystemTime(time)
 			const wrapper = mount(NcDateTime, {
@@ -98,6 +98,31 @@ describe('NcDateTime.vue', () => {
 		})
 	})
 
+	describe('Work with different languages', () => {
+		beforeAll(() => {
+			// mock the language
+			document.documentElement.lang = 'de'
+		})
+		afterAll(() => {
+			// revert mock
+			document.documentElement.lang = 'en'
+		})
+
+		it('Works with relative timestamps', () => {
+			const now = Date.UTC(2023, 5, 24, 14, 0)
+			jest.setSystemTime(now)
+
+			const yesterday = Date.UTC(2023, 5, 23, 13, 59)
+			const wrapper = mount(NcDateTime, {
+				propsData: {
+					timestamp: yesterday,
+				},
+			})
+
+			expect(wrapper.text()).toMatch('gestern')
+		})
+	})
+
 	describe('Shows relative time', () => {
 		it('works with currentTime == timestamp', () => {
 			const time = Date.UTC(2023, 5, 23, 14, 30)