[6.x] Always display time zone in DatePicker

resources/js/components/fieldtypes/DateIndexFieldtype.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-text="formatted"></div>
+    <div v-text="formatted" v-tooltip="tooltip"></div>
 </template>
 
 <script setup>
@@ -28,5 +28,22 @@ const formatted = computed(() => {
     return formatter.date(props.value.date).toString();
 });
 
+const tooltip = computed(() => {
+    if (!props.value) {
+        return null;
+    }
+
+    const formatter = new DateFormatter().options({ dateStyle: 'long', timeStyle: 'long' });
+
+    if (props.value.mode === 'range') {
+        let start = new Date(props.value.start);
+        let end = new Date(props.value.end);
+
+        return formatter.date(start) + ' – ' + formatter.date(end);
+    }
+
+    return formatter.date(props.value.date).toString();
+});
+
 defineExpose(expose);
 </script>

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

@@ -24,6 +24,7 @@ import Card from '../Card/Card.vue';
 import Button from '../Button/Button.vue';
 import Calendar from '../Calendar/Calendar.vue';
 import Icon from '../Icon/Icon.vue';
+import Text from '../Text.vue';
 
 const emit = defineEmits(['update:modelValue']);
 
@@ -95,6 +96,16 @@ const calendarEvents = computed(() => ({
     },
 }));
 
+const timeZoneName = computed(() => props.modelValue?.timeZone ?? null);
+
+const timeZoneLabel = computed(() => {
+    const tz = timeZoneName.value;
+    if (!tz) return null;
+
+    const parts = new Intl.DateTimeFormat(undefined, { timeZone: tz, timeZoneName: 'short' }).formatToParts(props.modelValue.toDate());
+    return parts.find((p) => p.type === 'timeZoneName')?.value ?? tz;
+});
+
 const isInvalid = computed(() => {
     // Check if the component has invalid state from form validation
     return props.modelValue === null && props.required;
@@ -187,6 +198,12 @@ const getInputLabel = (part) => {
                                 </div>
                             </template>
                         </div>
+                        <Text
+                            class="text-gray-600 dark:text-gray-400 me-1"
+                            size="xs"
+                            v-tooltip="timeZoneName"
+                            :text="timeZoneLabel"
+                        />
                         <Button
                             v-if="clearable && !readOnly"
                             @click="emit('update:modelValue', null)"