src/components/utils/IsoDateInput.vue

@@ -10,7 +10,7 @@
     <template #append>
       <q-icon v-if="type == 'date' || type == 'datetime'" name="event" class="cursor-pointer">
         <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
-          <q-date :model-value="getDate()" mask="YYYY-MM-DD" @input="dateChanged">
+          <q-date v-model="date" mask="YYYY-MM-DD">
             <div class="row items-center justify-end">
               <q-btn v-close-popup label="Schließen" color="primary" flat />
             </div>
@@ -23,7 +23,7 @@
         class="cursor-pointer"
       >
         <q-popup-proxy ref="qTimeProxy" transition-show="scale" transition-hide="scale">
-          <q-time :model-value="getTime()" mask="HH:mm" @update:modelValue="timeChanged">
+          <q-time v-model="time" mask="HH:mm">
             <div class="row items-center justify-end">
               <q-btn v-close-popup label="Schließen" color="primary" flat />
             </div>
@@ -35,13 +35,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, PropType } from 'vue';
+import { computed, defineComponent, PropType } from 'vue';
 import { date as q_date } from 'quasar';
 
 export default defineComponent({
   name: 'IsoDateInput',
   props: {
-    modelValue: { type: Date, default: new Date() },
+    modelValue: { type: Object as PropType<Date>, default: new Date() },
     type: {
       type: String,
       default: 'date',
@@ -54,10 +54,8 @@ export default defineComponent({
       default: () => [],
     },
   },
-  emits: { input: (date: string) => date.length > 5 },
+  emits: { 'update:modelValue': (date: Date) => !!date },
   setup(props, { emit }) {
-    const _date = ref('');
-    const _time = ref('');
     const placeholder = computed(() => {
       switch (props.type) {
         case 'date':
@@ -70,77 +68,59 @@ export default defineComponent({
       throw 'Invalid type given';
     });
 
-    const dateTime = computed({
+    const date = computed({
-      get() {
+      get: () => q_date.formatDate(props.modelValue, 'YYYY-MM-DD'),
-        if (typeof props.modelValue == 'object') {
+      set: (v: string) => {
-          switch (props.type) {
+        const d = modifyDate(v);
-            case 'date':
+        if (d) emit('update:modelValue', d);
-              return getDate();
-            case 'time':
-              return getTime();
-            case 'datetime':
-              return `${getDate()} ${getTime()}`;
-          }
-        }
-        return props.modelValue;
       },
-      set(dateTimeString: string) {
+    });
+
+    const time = computed({
+      get: () => q_date.formatDate(props.modelValue, 'HH:mm'),
+      set: (v: string) => {
+        const d = modifyTime(v);
+        if (d) emit('update:modelValue', d);
+      },
+    });
+
+    const dateTime = computed({
+      get: () => q_date.formatDate(props.modelValue, placeholder.value),
+      set: (v: string) => {
         switch (props.type) {
           case 'date':
-            dateChanged(dateTimeString);
+            date.value = v;
             break;
           case 'time':
-            timeChanged(dateTimeString);
+            time.value = v;
             break;
           case 'datetime':
-            const _dateTime = dateTimeString.split(' ');
+            const split = v.split(' ').filter((c) => c !== '');
-            _date.value = _dateTime[0];
+            if (split.length == 2) {
-            _time.value = _dateTime[1];
+              const d = modifyTime(split[1], modifyDate(split[0]));
-            console.log(dateTimeString, _dateTime);
+              if (d) emit('update:modelValue', d);
-            if (/^\d{4}-\d\d-\d\d \d\d:\d\d$/.test(dateTimeString)) {
-              console.log('dateTimeChanged');
-              emit('input', new Date(`${_date.value} ${_time.value}`).toISOString());
-            } else {
-              emit('input', dateTimeString);
             }
+            break;
         }
       },
     });
 
-    function dateChanged(dateString: string) {
+    function modifyTime(v: string, d: Date | undefined = props.modelValue) {
-      _date.value = dateString;
+      if (d && /^\d\d:\d\d$/.test(v)) {
-      console.log(dateString);
+        const split = v.split(':');
-
+        return q_date.adjustDate(d, { hours: +split[0], minutes: +split[1] });
-      if (/^\d{4}-\d\d-\d\d$/.test(dateString)) {
-        emit('input', new Date(`${_date.value} ${_time.value}`).toISOString());
-      } else {
-        emit('input', dateString);
       }
     }
 
-    function timeChanged(timeString: string) {
+    function modifyDate(v: string, d: Date | undefined = props.modelValue) {
-      _time.value = timeString;
+      if (d && /^\d{4}-\d\d-\d\d$/.test(v)) {
-      if (_date.value == '') {
+        const split = v.split('-');
-        _date.value = q_date.formatDate(new Date(), 'YYYY-MM-DD');
+        return q_date.adjustDate(d, {
+          year: +split[0],
+          month: +split[1],
+          date: +split[2],
+        });
       }
-      if (/^\d\d:\d\d$/.test(timeString)) {
-        emit('input', new Date(`${_date.value} ${_time.value}`).toISOString());
-      } else {
-        emit('input', timeString);
-      }
-    }
-
-    function getDate() {
-      if (typeof props.modelValue == 'object') {
-        return q_date.formatDate(props.modelValue, 'YYYY-MM-DD');
-      }
-      return '';
-    }
-    function getTime() {
-      if (typeof props.modelValue == 'object') {
-        return q_date.formatDate(props.modelValue, 'HH:mm');
-      }
-      return '';
     }
 
     function isDate(val: string) {
@@ -161,12 +141,10 @@ export default defineComponent({
     ];
 
     return {
+      date,
+      time,
       dateTime,
-      getDate,
-      getTime,
-      dateChanged,
       customRules,
-      timeChanged,
       placeholder,
     };
   },