Time selection in filters, no = and ≠ operators for datetimes (radiantearth#569)

Author: m-mohr

src/components/DatePickerMixin.js

@@ -5,9 +5,14 @@ export default {
     DatePicker: () => import('vue2-datepicker')
   },
   data() {
+    const dateFormat = 'YYYY-MM-DD';
+    const timeFormat = 'HH:mm:ss';
     return {
       datepickerLang: null,
-      datepickerFormat: 'YYYY-MM-DD'
+      dateFormat,
+      timeFormat,
+      dateTimeFormat: `${dateFormat} ${timeFormat}`,
+      twelveHourClock: false
     };
   },
   computed: {
@@ -27,8 +32,10 @@ export default {
         else {
           this.datepickerLang = options.locale;
         }
-        this.datepickerFormat = options.format;
+        this.dateFormat = options.dateFormat;
+        this.timeFormat = options.timeFormat;
+        this.dateTimeFormat = options.dateTimeFormat;
       }
     }
   }
-};
+};

src/components/QueryableInput.vue

@@ -19,10 +19,7 @@
 
       <date-picker
         v-if="queryable.isTemporal"
-        type="date"
         class="value"
-        :lang="datepickerLang"
-        :format="datepickerFormat"
         :value="value.value"
         @input="updateValue($event)"
         v-bind="validation"
@@ -110,7 +107,14 @@ export default {
   },
   computed: {
     validation() {
-      if (this.queryable.isText && !this.queryable.isTemporal) {
+      if (this.queryable.isTemporal) {
+        return {
+          type: this.queryable.isDateTime ? 'datetime' : 'date',
+          lang: this.datepickerLang,
+          format: this.queryable.isDateTime ? this.dateTimeFormat : this.dateFormat
+        };
+      }
+      else if (this.queryable.isText) {
         return {
           type: 'text',
           minlength: this.schema.minLength,

src/components/SearchFilter.vue

@@ -21,8 +21,8 @@
 
         <b-form-group v-if="canFilterExtents" class="filter-datetime" :label="$t('search.temporalExtent')" :label-for="ids.datetime" :description="$t('search.dateDescription')">
           <date-picker
-            range :id="ids.datetime" :lang="datepickerLang" :format="datepickerFormat"
-            v-model="datetime" input-class="form-control mx-input"
+            range type="datetime" v-model="datetime" input-class="form-control mx-input"
+            :id="ids.datetime" :lang="datepickerLang" :format="dateTimeFormat"
           />
         </b-form-group>
 
@@ -133,7 +133,6 @@ import Cql from '../models/cql2/cql';
 import Queryable from '../models/cql2/queryable';
 import CqlValue from '../models/cql2/value';
 import CqlLogicalOperator from '../models/cql2/operators/logical';
-import { CqlEqual } from '../models/cql2/operators/comparison';
 import { stacRequest } from '../store/utils';
 
 function getQueryDefaults() {
@@ -490,9 +489,10 @@ export default {
       this.filters.splice(queryableIndex, 1);
     },
     additionalFieldSelected(queryable) {
+      const operators = queryable.getOperators(this.cql);
       this.filters.push({
         value: CqlValue.create(queryable.defaultValue),
-        operator: CqlEqual,
+        operator: operators[0],
         queryable
       });
     },

src/locales/de-CH/datepicker.js

@@ -1,3 +1,5 @@
-const format = 'DD.MM.YYYY';
+const dateFormat = 'DD.MM.YYYY';
+const timeFormat = 'H:mm:ss';
+const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 const locale = import('vue2-datepicker/locale/de');
-export default {format, locale};
+export default {dateFormat, timeFormat, dateTimeFormat, locale};

src/locales/de/datepicker.js

@@ -1,3 +1,5 @@
-const format = 'D.M.YYYY';
+const dateFormat = 'D.M.YYYY';
+const timeFormat = 'H:mm:ss';
+const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 const locale = import('vue2-datepicker/locale/de');
-export default {format, locale};
+export default {dateFormat, timeFormat, dateTimeFormat, locale};

src/locales/en-GB/datepicker.js

@@ -1,4 +1,6 @@
-const format = 'DD/MM/YYYY';
+const dateFormat = 'DD/MM/YYYY';
+const timeFormat = 'hh:mm:ss a';
+const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 const locale = import('vue2-datepicker/locale/en');
 locale.formatLocale.firstDayOfWeek = 1;
-export default {format, locale};
+export default {dateFormat, timeFormat, dateTimeFormat, locale};

src/locales/en-US/datepicker.js

@@ -1,4 +1,6 @@
-const format = 'M/D/YYYY';
+const dateFormat = 'M/D/YYYY';
+const timeFormat = 'hh:mm:ss a';
+const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 const locale = import('vue2-datepicker/locale/en');
 locale.formatLocale.firstDayOfWeek = 0;
-export default {format, locale};
+export default {dateFormat, timeFormat, dateTimeFormat, locale};

src/locales/en/datepicker.js

@@ -1,5 +1,7 @@
 // 1. Specify output format
-const format = 'YYYY-MM-DD';
+const dateFormat = 'YYYY-MM-DD';
+const timeFormat = 'HH:mm:ss';
+const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 
 // 2A. Either re-use settings and phrases from vue2-datepicker (and customize them)...
 const locale = import('vue2-datepicker/locale/en');
@@ -51,4 +53,4 @@ const locale = {
 }
 */
 
-export default {format, locale};
+export default {dateFormat, timeFormat, dateTimeFormat, locale};

src/locales/es/datepicker.js

@@ -1,3 +1,5 @@
-const format = 'DD/MM/YYYY';
+const dateFormat = 'DD/MM/YYYY';
+const timeFormat = 'H:mm:ss';
+const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 const locale = import('vue2-datepicker/locale/es');
-export default {format, locale};
+export default {dateFormat, timeFormat, dateTimeFormat, locale};

src/locales/fr-CA/datepicker.js

@@ -1,3 +1,5 @@
-const format = 'YYYY-MM-DD';
+const dateFormat = 'YYYY-MM-DD';
+const timeFormat = 'H:mm:ss';
+const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 const locale = import('vue2-datepicker/locale/fr');
-export default {format, locale};
+export default {dateFormat, timeFormat, dateTimeFormat, locale};

src/locales/fr-CH/datepicker.js

@@ -1,3 +1,5 @@
-const format = 'DD.MM.YYYY';
+const dateFormat = 'DD.MM.YYYY';
+const timeFormat = 'H:mm:ss';
+const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 const locale = import('vue2-datepicker/locale/fr');
-export default {format, locale};
+export default {dateFormat, timeFormat, dateTimeFormat, locale};

src/locales/fr/datepicker.js

@@ -1,3 +1,5 @@
-const format = 'DD/MM/YYYY';
+const dateFormat = 'DD/MM/YYYY';
+const timeFormat = 'H:mm:ss';
+const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 const locale = import('vue2-datepicker/locale/fr');
-export default {format, locale};
+export default {dateFormat, timeFormat, dateTimeFormat, locale};

src/locales/it-CH/datepicker.js

@@ -1,3 +1,5 @@
-const format = 'DD.MM.YYYY';
+const dateFormat = 'DD.MM.YYYY';
+const timeFormat = 'H:mm:ss';
+const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 const locale = import('vue2-datepicker/locale/it');
-export default {format, locale};
+export default {dateFormat, timeFormat, dateTimeFormat, locale};

src/locales/it/datepicker.js

@@ -1,3 +1,5 @@
-const format = 'DD/MM/YYYY';
+const dateFormat = 'DD/MM/YYYY';
+const timeFormat = 'H:mm:ss';
+const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 const locale = import('vue2-datepicker/locale/it');
-export default {format, locale};
+export default {dateFormat, timeFormat, dateTimeFormat, locale};

src/locales/ja/datepicker.js

@@ -1,3 +1,5 @@
-const format = 'YYYY/MM/DD';
+const dateFormat = 'YYYY/MM/DD';
+const timeFormat = 'H:mm:ss';
+const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 const locale = import('vue2-datepicker/locale/ja');
-export default {format, locale};
+export default {dateFormat, timeFormat, dateTimeFormat, locale};

src/locales/pt-BR/datepicker.js

@@ -1,3 +1,5 @@
-const format = 'DD/MM/YYYY';
+const dateFormat = 'DD/MM/YYYY';
+const timeFormat = 'H:mm:ss';
+const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 const locale = import('vue2-datepicker/locale/pt-br');
-export default {format, locale};
+export default {dateFormat, timeFormat, dateTimeFormat, locale};

src/locales/pt/datepicker.js

@@ -1,3 +1,3 @@
-const format = 'DD/MM/YYYY';
+const dateFormat = 'DD/MM/YYYY';
 const locale = import('vue2-datepicker/locale/pt');
-export default {format, locale};
+export default {dateFormat, timeFormat, dateTimeFormat, locale};

src/locales/ro/datepicker.js

@@ -1,3 +1,5 @@
-const format = 'DD/MM/YYYY';
+const dateFormat = 'DD/MM/YYYY';
+const timeFormat = 'H:mm:ss';
+const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 const locale = import('vue2-datepicker/locale/ro');
-export default {format, locale};
+export default {dateFormat, timeFormat, dateTimeFormat, locale};

src/models/cql2/queryable.js

@@ -96,7 +96,15 @@ export default class Queryable {
   }
 
   getOperators(cql) {
-    let ops = [CqlEqual, CqlNotEqual];
+    let ops = [];
+    if (!this.isDateTime) {
+      // Although it is supported, comparing specific instances in time doesn't give predictable results.
+      // For example 2020-01-01T00:00:00Z is not equal to 2020-01-01T00:00:00.001Z and you don't know the granularity
+      // of the datetimes in the database. In the end you usually don't get what you are looking for.
+      // This may work better for dates only, so we only remove equality operators for dates with times.
+      ops.push(CqlEqual);
+      ops.push(CqlNotEqual);
+    }
     if (this.isNumeric || this.isTemporal) {
       ops.push(CqlLessThan);
       ops.push(CqlLessThanEqual);
@@ -117,4 +125,4 @@ export default class Queryable {
     return { property: this.id };
   }
 
-}
+}