src/components/utils/IsoDateInput.vue

@@ -3,82 +3,158 @@
     filled
     :readonly="readonly"
     :label="label"
-    :value="getDate()"
+    :value="getDateTime()"
-    placeholder="YYYY-MM-DD"
+    :placeholder="placeholder"
     v-on:input="dateChanged"
-    :rules="[isDate]"
+    :rules="rules"
   >
     <template v-slot:append>
-      <q-icon
+      <q-icon name="event" class="cursor-pointer" v-if="type == 'date' || type == 'datetime'">
-        name="event"
+        <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
-        class="cursor-pointer"
+          <q-date :value="getDate()" mask="YYYY-MM-DD" v-on:input="dateChanged">
-      >
-        <q-popup-proxy
-          ref="qDateProxy"
-          transition-show="scale"
-          transition-hide="scale"
-        >
-          <q-date
-            :value="getDate()"
-            mask="YYYY-MM-DD"
-            v-on:input="dateChanged"
-          >
             <div class="row items-center justify-end">
-              <q-btn
+              <q-btn v-close-popup label="Schließen" color="primary" flat />
-                v-close-popup
-                label="Schließen"
-                color="primary"
-                flat
-              />
             </div>
           </q-date>
         </q-popup-proxy>
       </q-icon>
+      <q-icon
+        name="mdi-clock-outline"
+        class="cursor-pointer"
+        v-if="type == 'time' || type == 'datetime'"
+      >
+        <q-popup-proxy ref="qTimeProxy" transition-show="scale" transition-hide="scale">
+          <q-time :value="getTime()" mask="HH:mm" v-on:input="timeChanged">
+            <div class="row items-center justify-end">
+              <q-btn v-close-popup label="Schließen" color="primary" flat />
+            </div>
+          </q-time>
+        </q-popup-proxy>
+      </q-icon>
     </template>
   </q-input>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { computed, defineComponent, ref } from '@vue/composition-api';
 import { date } from 'quasar';
 interface Props {
   value?: Date;
   label?: string;
   readonly: boolean;
+  type: string;
 }
 
 export default defineComponent({
   name: 'IsoDateInput',
   props: {
     value: {
-      required: true,
+      required: true
     },
     label: {},
     readonly: {
-      default: false,
+      default: false
     },
+    type: {
+      default: 'date',
+      validator: function(value: string) {
+        return ['date', 'time', 'datetime'].indexOf(value) !== -1;
+      }
+    }
   },
-  setup(props: Props, { emit }) {
+  setup(props: Props, { emit }: { emit: any }) {
+    function getDateTime() {
+      if (props.value) {
+        switch (props.type) {
+          case 'date':
+            return getDate();
+          case 'time':
+            return getTime();
+          case 'datetime':
+            return `${getDate()} ${getTime()}`;
+        }
+      }
+    }
+
     function getDate() {
       if (props.value) {
         return date.formatDate(props.value, 'YYYY-MM-DD');
       }
       return '';
     }
+    function getTime() {
+      if (props.value) {
+        return date.formatDate(props.value, 'HH:mm');
+      }
+      return '';
+    }
+
+    const _date = ref('');
+    const _time = ref('');
+    const placeholder = computed(() => {
+      switch (props.type) {
+        case 'date':
+          return 'YYYY-MM-DD';
+          break;
+        case 'time':
+          return 'HH:mm';
+        case 'datetime':
+          return 'YYYY-MM-DD HH:mm';
+      }
+    });
 
     function dateChanged(dateString: string) {
-      emit('input', new Date(dateString));
+      _date.value = dateString;
+      console.log('dateChanged', new Date(`${_date.value} ${_time.value}`));
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      emit('input', new Date(`${_date.value} ${_time.value}`));
+    }
+
+    function timeChanged(timeString: string) {
+      _time.value = timeString;
+      if (_date.value == '') {
+        _date.value = date.formatDate(new Date(), 'YYYY-MM-DD');
+      }
+      console.log('timeChanged', new Date(`${_date.value} ${_time.value}`));
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      emit('input', new Date(`${_date.value} ${_time.value}`));
     }
 
     function isDate(val: string) {
       return !val || /^\d{4}-\d\d-\d\d$/.test(val) || 'Datum ist nicht gültig.';
     }
 
+    function isTime(val: string) {
+      return !val || /^\d\d:\d\d$/.test(val) || 'Zeit ist nicht gültig.';
+    }
+
+    function isDateTime(val: string) {
+      return !val || /^\d{4}-\d\d-\d\d \d\d:\d\d$/.test(val) || 'Datum und Zeit ist nicht gültig.';
+    }
+
+    const rules = computed(() => {
+      switch (props.type) {
+        case 'date':
+          return [isDate];
+          break;
+        case 'time':
+          return [isTime];
+          break;
+        case 'datetime':
+          return [isDateTime];
+          break;
+      }
+    });
+
     return {
       getDate,
+      getTime,
+      getDateTime,
       dateChanged,
-      isDate,
+      rules,
+      timeChanged,
+      placeholder
     };
-  },
+  }
 });
 </script>