Hide redundant 'This field' timezone row when it matches site or local time

Author: jasonvarga

resources/js/components/ui/DatePicker/DatePicker.vue

@@ -27,6 +27,7 @@ import Calendar from '../Calendar/Calendar.vue';
 import Icon from '../Icon/Icon.vue';
 import Text from '../Text.vue';
 import TimezoneHoverCard from '../TimezoneHoverCard.vue';
+import { getAdditionalTimezones } from './util.js';
 
 const emit = defineEmits(['update:modelValue']);
 
@@ -108,6 +109,8 @@ const timeZoneLabel = computed(() => {
     return parts.find((p) => p.type === 'timeZoneName')?.value ?? tz;
 });
 
+const additionalTimezones = computed(() => getAdditionalTimezones(timeZoneName.value));
+
 const isInvalid = computed(() => {
     // Check if the component has invalid state from form validation
     return props.modelValue === null && props.required;
@@ -203,7 +206,7 @@ const getInputLabel = (part) => {
                         <TimezoneHoverCard
                             v-if="timeZoneLabel"
                             :date="modelValue.toDate()"
-                            :additional-timezones="[{ timezone: timeZoneName, label: __('This field') }]"
+                            :additional-timezones="additionalTimezones"
                             side="top"
                         >
                             <Text class="text-gray-600 dark:text-gray-400 me-1" size="xs" :text="timeZoneLabel" />

resources/js/components/ui/DatePicker/util.js

@@ -0,0 +1,9 @@
+import { config } from '@api';
+import { getLocalTimeZone } from '@internationalized/date';
+
+export function getAdditionalTimezones(timeZone) {
+    if (!timeZone) return [];
+    if (timeZone === (config.get('displayTimezone') ?? 'UTC')) return [];
+    if (timeZone === getLocalTimeZone()) return [];
+    return [{ timezone: timeZone, label: __('This field') }];
+}

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

@@ -27,6 +27,7 @@ import Icon from '../Icon/Icon.vue';
 import Text from '../Text.vue';
 import TimezoneHoverCard from '../TimezoneHoverCard.vue';
 import { parseAbsoluteToLocal } from '@internationalized/date';
+import { getAdditionalTimezones } from '../DatePicker/util.js';
 
 const emit = defineEmits(['update:modelValue']);
 
@@ -110,6 +111,8 @@ const timeZoneLabel = computed(() => {
     return parts.find((p) => p.type === 'timeZoneName')?.value ?? tz;
 });
 
+const additionalTimezones = computed(() => getAdditionalTimezones(timeZoneName.value));
+
 const hoverCardDate = computed(() => {
     if (!props.modelValue?.start || !props.modelValue?.end) return null;
     return { start: props.modelValue.start.toDate(), end: props.modelValue.end.toDate() };
@@ -182,7 +185,7 @@ const hoverCardDate = computed(() => {
                     <TimezoneHoverCard
                         v-if="timeZoneLabel && hoverCardDate"
                         :date="hoverCardDate"
-                        :additional-timezones="[{ timezone: timeZoneName, label: __('This field') }]"
+                        :additional-timezones="additionalTimezones"
                         side="top"
                     >
                         <Text class="text-gray-600 dark:text-gray-400 me-1" size="xs" :text="timeZoneLabel" />