[6.x] Fix editing date fields displayed in a timezone other than the browser's

package.json

@@ -83,7 +83,7 @@
     "pusher-js": "^8.4.0-rc2",
     "qs": "^6.15.2",
     "read-time-estimate": "0.0.3",
-    "reka-ui": "^2.9.2",
+    "reka-ui": "^2.10.5",
     "resize-observer-polyfill": "^1.5.1",
     "semver": "^7.7.1",
     "speakingurl": "^14.0.1",

resources/js/components/ui/DateRangePicker/DateRangePicker.vue

@@ -133,7 +133,7 @@ const hoverCardDate = computed(() => {
             v-bind="$attrs"
             prevent-deselect
             hide-time-zone
-            :default-placeholder="defaultPlaceholder"
+            :default-placeholder="(modelValue?.start ?? modelValue?.end) ? undefined : defaultPlaceholder"
             close-on-select
         >
             <DateRangePickerField v-slot="{ segments }" class="w-full">

resources/js/tests/components/ui/DatePicker.test.js

@@ -0,0 +1,40 @@
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import { CalendarDateTime, toZoned } from '@internationalized/date';
+import DatePicker from '@/components/ui/DatePicker/DatePicker.vue';
+import { config } from '@api';
+
+window.__ = (key) => key;
+
+config.initialize({ translationLocale: 'en' });
+
+const makeDatePicker = (modelValue) => {
+    return mount(DatePicker, {
+        props: { modelValue, granularity: 'minute' },
+        global: {
+            mocks: {
+                $date: { locale: 'en-US' },
+            },
+        },
+    });
+};
+
+test('day period reflects the zoned date rather than the browser timezone', () => {
+    process.env.TZ = 'America/New_York';
+
+    const datePicker = makeDatePicker(toZoned(new CalendarDateTime(2024, 1, 20, 15, 30), 'Europe/London'));
+
+    expect(datePicker.get('[data-reka-date-field-segment="hour"]').text()).toBe('3');
+    expect(datePicker.get('[data-reka-date-field-segment="dayPeriod"]').text()).toBe('PM');
+});
+
+test('typing an hour keeps the day period of the zoned date', async () => {
+    process.env.TZ = 'America/New_York';
+
+    const modelValue = toZoned(new CalendarDateTime(2024, 1, 20, 15, 30), 'Europe/London');
+    const datePicker = makeDatePicker(modelValue);
+
+    await datePicker.get('[data-reka-date-field-segment="hour"]').trigger('keydown', { key: '5' });
+
+    expect(datePicker.emitted('update:modelValue')[0][0].toString()).toBe(modelValue.set({ hour: 17 }).toString());
+});

resources/js/tests/components/ui/DateRangePicker.test.js

@@ -0,0 +1,62 @@
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import { CalendarDateTime, toZoned } from '@internationalized/date';
+import DateRangePicker from '@/components/ui/DateRangePicker/DateRangePicker.vue';
+import { config } from '@api';
+
+window.__ = (key) => key;
+
+config.initialize({ translationLocale: 'en' });
+
+const makeDateRangePicker = (modelValue) => {
+    return mount(DateRangePicker, {
+        props: { modelValue, granularity: 'minute' },
+        global: {
+            mocks: {
+                $date: { locale: 'en-US' },
+            },
+        },
+    });
+};
+
+const segment = (type, part) => `[data-reka-date-range-field-segment-type="${type}"][data-reka-date-field-segment="${part}"]`;
+
+test('day periods reflect the zoned dates rather than the browser timezone', () => {
+    process.env.TZ = 'America/New_York';
+
+    const dateRangePicker = makeDateRangePicker({
+        start: toZoned(new CalendarDateTime(2024, 1, 20, 15, 30), 'Europe/London'),
+        end: toZoned(new CalendarDateTime(2024, 1, 21, 16, 30), 'Europe/London'),
+    });
+
+    expect(dateRangePicker.get(segment('start', 'hour')).text()).toBe('3');
+    expect(dateRangePicker.get(segment('start', 'dayPeriod')).text()).toBe('PM');
+    expect(dateRangePicker.get(segment('end', 'hour')).text()).toBe('4');
+    expect(dateRangePicker.get(segment('end', 'dayPeriod')).text()).toBe('PM');
+});
+
+test('typing an hour keeps the day period of the zoned dates', async () => {
+    process.env.TZ = 'America/New_York';
+
+    const start = toZoned(new CalendarDateTime(2024, 1, 20, 15, 30), 'Europe/London');
+    const end = toZoned(new CalendarDateTime(2024, 1, 21, 16, 30), 'Europe/London');
+    const dateRangePicker = makeDateRangePicker({ start, end });
+
+    await dateRangePicker.get(segment('end', 'hour')).trigger('keydown', { key: '5' });
+
+    const emitted = dateRangePicker.emitted('update:modelValue')[0][0];
+    expect(emitted.start.toString()).toBe(start.toString());
+    expect(emitted.end.toString()).toBe(end.set({ hour: 17 }).toString());
+});
+
+test('day period reflects the zoned date rather than the browser timezone when only the end is set', () => {
+    process.env.TZ = 'America/New_York';
+
+    const dateRangePicker = makeDateRangePicker({
+        start: undefined,
+        end: toZoned(new CalendarDateTime(2024, 1, 21, 16, 30), 'Europe/London'),
+    });
+
+    expect(dateRangePicker.get(segment('end', 'hour')).text()).toBe('4');
+    expect(dateRangePicker.get(segment('end', 'dayPeriod')).text()).toBe('PM');
+});