Merge pull request #61744 from nextcloud/backport/61638/stable32

[stable32] fix(settings): in absence form avoid shifting dates to browsers timezone

Author: odzhychko

apps/dav/src/components/AbsenceForm.spec.js

@@ -0,0 +1,75 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import AbsenceForm from './AbsenceForm.vue'
+
+let davAbsence
+vi.mock('@nextcloud/initial-state', () => ({
+	loadState(app, key, fallback) {
+		if (app === 'dav' && key === 'absence' && davAbsence !== undefined) {
+			return davAbsence
+		}
+		if (fallback !== undefined) {
+			return fallback
+		}
+
+		console.error('Unexpected loadState call without fallback', { app, key })
+		throw new Error()
+	},
+}))
+
+afterEach(() => {
+	vi.unstubAllEnvs()
+	davAbsence = undefined
+	vi.resetModules()
+})
+
+function mountAbsenceForm() {
+	return mount(AbsenceForm, {
+		mocks: {
+			$t: (_app, text) => text,
+		},
+	})
+}
+
+function getInputs(wrapper) {
+	const lables = wrapper.findAll('label')
+
+	const firstDayLabel = lables.filter((l) => l.text() === 'First day').at(0)
+	const firstDayInput = wrapper.get(`#${firstDayLabel.attributes('for')}`)
+
+	const lastDayLabel = lables.filter((l) => l.text() === 'Last day (inclusive)').at(0)
+	const lastDayInput = wrapper.get(`#${lastDayLabel.attributes('for')}`)
+
+	return { firstDayInput, lastDayInput }
+}
+
+describe('AbsenceForm', () => {
+	it('displays default state when browser timezone is set', async () => {
+		vi.setSystemTime(new Date(2026, 5, 29, 5, 0))
+		vi.stubEnv('TZ', 'US/Pacific')
+
+		const wrapper = mountAbsenceForm()
+
+		const { firstDayInput } = getInputs(wrapper)
+		expect(firstDayInput.element.value).toBe('2026-06-29')
+	})
+
+	it('displays state when browser timezone is set', async () => {
+		vi.stubEnv('TZ', 'US/Pacific')
+		davAbsence = {
+			firstDay: '2026-06-29',
+			lastDay: '2026-06-30',
+		}
+
+		const wrapper = mountAbsenceForm()
+
+		const { firstDayInput, lastDayInput } = getInputs(wrapper)
+		expect(firstDayInput.element.value).toBe('2026-06-29')
+		expect(lastDayInput.element.value).toBe('2026-06-30')
+	})
+})

apps/dav/src/components/AbsenceForm.vue

@@ -66,6 +66,22 @@ import NcTextArea from '@nextcloud/vue/components/NcTextArea'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import NcDateTimePickerNative from '@nextcloud/vue/components/NcDateTimePickerNative'
 
+/**
+ * Adjusts a date so `NcDateTimePickerNative` shows the same date
+ * instead of shifting it to the browsers timezone.
+ *
+ * @param {Date} date - e.g., new Date("1987-12-01")
+ * @return {Date}
+ */
+function inputAdjustDate(date) {
+	// e.g., date === Mon Nov 30 1987 16:00:00 GMT-0800 (Pacific Standard Time)
+	const timezoneOffsetMilliseconds = date.getTimezoneOffset() * 60 * 1000
+	// e.g., Tue Dec 01 1987 00:00:00 GMT-0800 (Pacific Standard Time)
+	const adjustedDate = new Date(date.getTime() + timezoneOffsetMilliseconds)
+	// `NcDateTimePickerNative` will display this as 12/01/1987
+	return adjustedDate
+}
+
 export default {
 	name: 'AbsenceForm',
 	components: {
@@ -77,12 +93,15 @@ export default {
 	},
 	data() {
 		const { firstDay, lastDay, status, message, replacementUserId, replacementUserDisplayName } = loadState('dav', 'absence', {})
+		const firstDayDate = firstDay ? new Date(firstDay) : new Date()
+		const firstDayInputAdjusted = inputAdjustDate(firstDayDate)
+		const lastDayInputAdjusted = lastDay ? inputAdjustDate(new Date(lastDay)) : null
 		return {
 			loading: false,
 			status: status ?? '',
 			message: message ?? '',
-			firstDay: firstDay ? new Date(firstDay) : new Date(),
-			lastDay: lastDay ? new Date(lastDay) : null,
+			firstDay: firstDayInputAdjusted,
+			lastDay: lastDayInputAdjusted,
 			replacementUserId,
 			replacementUser: replacementUserId ? { user: replacementUserId, displayName: replacementUserDisplayName } : null,
 			searchLoading: false,