src/components/utils/IsoDateInput.vue

@@ -5,7 +5,7 @@
     :label="label"
     :value="getDateTime()"
     :placeholder="placeholder"
-    v-on:input="dateChanged"
+    v-on:input="dateTimeChanged"
     :rules="rules"
   >
     <template v-slot:append>
@@ -49,18 +49,18 @@ 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 }: { emit: any }) {
     function getDateTime() {
@@ -105,9 +105,15 @@ export default defineComponent({
 
     function dateChanged(dateString: string) {
       _date.value = dateString;
+      console.log(dateString);
+
+      if (/^\d{4}-\d\d-\d\d$/.test(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}`));
+      } else {
+        console.log('no date');
+      }
     }
 
     function timeChanged(timeString: string) {
@@ -115,10 +121,33 @@ export default defineComponent({
       if (_date.value == '') {
         _date.value = date.formatDate(new Date(), 'YYYY-MM-DD');
       }
+      if (/^\d\d:\d\d$/.test(timeString)) {
         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 dateTimeChanged(dateTimeString: string) {
+      switch (props.type) {
+        case 'date':
+          dateChanged(dateTimeString);
+          break;
+        case 'time':
+          timeChanged(dateTimeString);
+          break;
+        case 'datetime':
+          const _dateTime = dateTimeString.split(' ');
+          _date.value = _dateTime[0];
+          _time.value = _dateTime[1];
+          console.log(dateTimeString, _dateTime);
+          if (/^\d{4}-\d\d-\d\d \d\d:\d\d$/.test(dateTimeString)) {
+            console.log('dateTimeChanged');
+            // 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.';
@@ -153,8 +182,9 @@ export default defineComponent({
       dateChanged,
       rules,
       timeChanged,
-      placeholder
+      placeholder,
+      dateTimeChanged,
     };
-  }
+  },
 });
 </script>