Date filters

src/components/api/FilterMatchMode.js

@@ -11,10 +11,10 @@ const FilterMatchMode = {
     GREATER_THAN : 'gt',
     GREATER_THAN_OR_EQUAL_TO : 'gte',
     BETWEEN : 'between',
-    IS : 'is',
-    IS_NOT : 'isNot',
-    BEFORE : 'before',
-    AFTER : 'after'
+    DATE_IS : 'dateIs',
+    DATE_IS_NOT : 'dateIsNot',
+    DATE_BEFORE : 'dateBefore',
+    DATE_AFTER : 'dateAfter'
 }
 
 export default FilterMatchMode;

src/components/api/FilterService.js

@@ -2,7 +2,7 @@ import {ObjectUtils} from 'primevue/utils';
 
 const FilterService = {
     filters: {
-            startsWith(value, filter, filterLocale)  {
+        startsWith(value, filter, filterLocale)  {
             if (filter === undefined || filter === null || filter.trim() === '') {
                 return true;
             }
@@ -169,31 +169,51 @@ const FilterService = {
             else
                 return value >= filter;
         },
-        is(value, filter, filterLocale) {
-            if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
+        dateIs(value, filter) {
+            if (filter === undefined || filter === null) {
                 return true;
             }
     
             if (value === undefined || value === null) {
                 return false;
             }
+
+            return value.toDateString() === filter.toDateString();
+        },
+        dateIsNot(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
     
-            if (value.getTime && filter.getTime)
-                return value.getTime() === filter.getTime();
-            else
-                return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) == ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            return value.toDateString() !== filter.toDateString();
         },
-        isNot(value, filter, filterLocale) {
-            return this.filters.notEquals(value, filter, filterLocale);
+        dateBefore(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+    
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            return value.getTime() < filter.getTime();
         },
-        before(value, filter, filterLocale) {
-            return this.filters.lt(value, filter, filterLocale);
-        },
-        after(value, filter, filterLocale) {
-            return this.filters.gt(value, filter, filterLocale);
+        dateAfter(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+    
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            return value.getTime() > filter.getTime();
         }
     },
-
     register(rule, fn) {
         this.filters[rule] = fn;
     }

src/components/config/PrimeVue.js

@@ -15,10 +15,10 @@ const defaultOptions = {
         lte: 'Less than or equal to',
         gt: 'Greater than',
         gte: 'Greater than or equal to',
-        is: 'Is',
-        isNot: 'Is not',
-        before: 'Before',
-        after: 'After',
+        dateIs: 'Date is',
+        dateIsNot: 'Date is not',
+        dateBefore: 'Date is before',
+        dateAfter: 'Date is after',
         clear: 'Clear',
         apply: 'Apply',
         matchAll: 'Match All',
@@ -62,10 +62,10 @@ const defaultOptions = {
             FilterMatchMode.GREATER_THAN_OR_EQUAL_TO
         ],
         date: [
-            FilterMatchMode.IS,
-            FilterMatchMode.IS_NOT,
-            FilterMatchMode.BEFORE,
-            FilterMatchMode.AFTER
+            FilterMatchMode.DATE_IS,
+            FilterMatchMode.DATE_IS_NOT,
+            FilterMatchMode.DATE_BEFORE,
+            FilterMatchMode.DATE_AFTER
         ]
     }
 };

src/views/datatable/DataTableFilterDemo.vue

@@ -78,7 +78,7 @@
                     <Column header="Date" filterField="date" dataType="date">
                         <template #body="{data}">
                             <span class="p-column-title">Date</span>
-                            {{data.date}}
+                            {{formatDate(data.date)}}
                         </template>
                         <template #filter="{filterModel}">
                             <Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" />
@@ -275,10 +275,26 @@ export default {
         this.initFilters1();
     },
     mounted() {
-        this.customerService.getCustomersLarge().then(data => {this.customers1 = data; this.loading1 = false;});
-        this.customerService.getCustomersLarge().then(data => {this.customers2 = data; this.loading2 = false;});
+        this.customerService.getCustomersLarge().then(data => {
+            this.customers1 = data; 
+            this.loading1 = false;
+            this.customers1.forEach(customer => customer.date = new Date(customer.date));
+        });
+        
+        this.customerService.getCustomersLarge().then(data => {
+            this.customers2 = data; 
+            this.loading2 = false;
+            this.customers2.forEach(customer => customer.date = new Date(customer.date));
+        });
     },
     methods: {
+        formatDate(value) {
+            return value.toLocaleDateString('en-US', {
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric',
+            });
+        },
         formatCurrency(value) {
             return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
         },
@@ -291,7 +307,7 @@ export default {
                 'name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
                 'country.name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
                 'representative': {value: null, matchMode: FilterMatchMode.IN},
-                'date': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.IS}]},
+                'date': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.DATE_IS}]},
                 'balance': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
                 'status': {operator: FilterOperator.OR, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
                 'activity': {value: null, matchMode: FilterMatchMode.BETWEEN},