diff --git a/resources/js/components/ui/Listing/Filters.vue b/resources/js/components/ui/Listing/Filters.vue
index 48373db5cd..4229cb626d 100644
--- a/resources/js/components/ui/Listing/Filters.vue
+++ b/resources/js/components/ui/Listing/Filters.vue
@@ -164,11 +164,25 @@ function handleStackClosed() {
             :key="handle"
             variant="filled"
             :icon-append="reorderable ? null : 'x'"
-            :text="badge"
             :disabled="reorderable"
             class="last:me-12"
             @click="removeFieldFilter(handle)"
-        />
+        >
+            <template v-if="handle == 'date'">
+                {{ badge.field }}
+                {{ badge.translatedOperator }}
+                <template v-if="badge.operator === 'between'">
+                    <date-time :of="badge.value.start" options="date" />
+                    {{ __('and') }}
+                    <date-time :of="badge.value.end" options="date" />
+                </template>
+                <date-time v-else :of="badge.value" options="date" />
+            </template>
+
+            <template v-else>
+                {{ badge }}
+            </template>
+        </Button>
         <Button
             v-for="(badge, handle, index) in standardBadges"
             :key="handle"
diff --git a/src/Query/Scopes/Filters/Fields/Date.php b/src/Query/Scopes/Filters/Fields/Date.php
index 50dfbc6106..ff8d0b5fee 100644
--- a/src/Query/Scopes/Filters/Fields/Date.php
+++ b/src/Query/Scopes/Filters/Fields/Date.php
@@ -65,13 +65,16 @@ public function badge($values)
     {
         $field = $this->fieldtype->field()->display();
         $operator = $values['operator'];
-        $translatedOperator = Arr::get($this->fieldItems(), "operator.options.{$operator}");
+        $translatedOperator = strtolower(Arr::get($this->fieldItems(), "operator.options.{$operator}"));
 
-        if ($operator == 'between') {
-            return $field.' '.strtolower($translatedOperator).' '.$values['range_value']['start'].' '.__('and').' '.$values['range_value']['end'];
-        }
+        $value = ($operator == 'between')
+            ? [
+                'start' => Carbon::parse($values['range_value']['start'])->toIso8601ZuluString('millisecond'),
+                'end' => Carbon::parse($values['range_value']['end'])->toIso8601ZuluString('millisecond'),
+            ]
+            : Carbon::parse(Arr::get($values, 'value'))->toIso8601ZuluString('millisecond');
 
-        return $field.' '.strtolower($translatedOperator).' '.$values['value'];
+        return compact('field', 'operator', 'translatedOperator', 'value');
     }
 
     public function isComplete($values): bool