[6.x] Date fieldtype

resources/js/components/fieldtypes/DateIndexFieldtype.vue

@@ -15,18 +15,16 @@ export default {
                 return null;
             }
 
+            const formatter = new DateFormatter().options(this.value.time_enabled ? 'datetime' : 'date');
+
             if (this.value.mode === 'range') {
-                let start = new Date(this.value.start.date + 'T' + (this.value.start.time || '00:00:00') + 'Z');
-                let end = new Date(this.value.end.date + 'T' + (this.value.end.time || '00:00:00') + 'Z');
-                const formatter = new DateFormatter().options('date');
+                let start = new Date(this.value.start);
+                let end = new Date(this.value.end);
 
                 return formatter.date(start) + ' – ' + formatter.date(end);
             }
 
-            return DateFormatter.format(
-                this.value.date + 'T' + (this.value.time || '00:00:00') + 'Z',
-                this.value.time_enabled && this.value.time ? 'datetime' : 'date',
-            );
+            return formatter.date(this.value.date).toString();
         },
     },
 };

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

@@ -20,6 +20,7 @@ import {
     DateRangePickerTrigger,
 } from 'reka-ui';
 import { WithField, Card, Button, Calendar } from '@statamic/ui';
+import { parseAbsoluteToLocal } from '@internationalized/date';
 
 const emit = defineEmits(['update:modelValue']);
 
@@ -34,6 +35,8 @@ const props = defineProps({
     max: { type: [String, Object], default: null },
     granularity: { type: String, default: null },
     inline: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
 });
 
 const calendarBindings = computed(() => ({
@@ -56,6 +59,12 @@ const calendarBindings = computed(() => ({
     },
 }));
 
+// The placeholder defines the month to show when there's no value. Additionally,
+// by setting it to an absolute value, it ensures that the emitted event value
+// will be the appropriate format (e.g. a full date with time with timezone,
+// rather than just a day).
+const placeholder = parseAbsoluteToLocal(new Date().toISOString());
+
 const calendarEvents = computed(() => ({
     'update:model-value': (event) => emit('update:modelValue', event),
 }));
@@ -70,6 +79,9 @@ const calendarEvents = computed(() => ({
                 :locale="$date.locale"
                 @update:model-value="emit('update:modelValue', $event)"
                 v-bind="$attrs"
+                prevent-deselect
+                hide-time-zone
+                :placeholder="placeholder"
             >
                 <DateRangePickerField v-slot="{ segments }" class="w-full">
                     <div

resources/js/components/ui/Datepicker/Index.vue

@@ -34,6 +34,8 @@ const props = defineProps({
     max: { type: [String, Object], default: null },
     granularity: { type: String, default: null },
     inline: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
 });
 
 const calendarBindings = computed(() => ({
@@ -70,6 +72,8 @@ const calendarEvents = computed(() => ({
                 :locale="$date.locale"
                 @update:model-value="emit('update:modelValue', $event)"
                 v-bind="$attrs"
+                prevent-deselect
+                hide-time-zone
             >
                 <DatePickerField v-slot="{ segments }" class="w-full">
                     <div
@@ -120,6 +124,13 @@ const calendarEvents = computed(() => ({
                 </Card>
             </DatePickerRoot>
         </div>
-        <Button @click="emit('update:modelValue', null)" type="button" class="" text="Clear" size="xs" />
+        <Button
+            v-if="clearable"
+            @click="emit('update:modelValue', null)"
+            type="button"
+            class=""
+            text="Clear"
+            size="xs"
+        />
     </WithField>
 </template>