Time selection in filters, no = and ≠ operators for datetimes (#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};