wip

Author: jasonvarga

resources/js/components/ui/Listing/Filters.vue

@@ -12,6 +12,7 @@ import { injectListingContext } from '../Listing/Listing.vue';
 import { computed, ref, watch, nextTick } from 'vue';
 import FieldFilter from './FieldFilter.vue';
 import DataListFilter from './Filter.vue';
+import DynamicHtmlRenderer from '@/components/DynamicHtmlRenderer.vue';
 
 const { filters, activeFilters, activeFilterBadges, activeFilterBadgeCount, setFilter, reorderable } = injectListingContext();
 
@@ -164,11 +165,23 @@ 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>
+
+            <span v-else v-text="badge" />
+        </Button>
         <Button
             v-for="(badge, handle, index) in standardBadges"
             :key="handle"

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(),
+                'end' => Carbon::parse($values['range_value']['end'])->toIso8601ZuluString(),
+            ]
+            : Carbon::parse(Arr::get($values, 'value'))->toIso8601ZuluString();
 
-        return $field.' '.strtolower($translatedOperator).' '.$values['value'];
+        return compact('field', 'operator', 'translatedOperator', 'value');
     }
 
     public function isComplete($values): bool