@afeefa/vue-app 0.0.80 → 0.0.81

package/.afeefa/package/release/version.txt

@@ -1 +1 @@
-0.0.80
+0.0.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.80",
+  "version": "0.0.81",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src/components/ADatePicker.vue

@@ -7,15 +7,16 @@
     min-width="auto"
   >
     <template #activator="{ on, attrs }">
-      <v-combobox
+      <v-text-field
         ref="input"
         :value="formattedDate"
         :label="label"
         :style="cwm_widthStyle"
-        readonly
         v-bind="{...$attrs, ...attrs}"
         :rules="validationRules"
+        :readonly="type === 'month'"
         v-on="on"
+        @input="dateInputChanged"
         @click:clear="clearDate"
         @click.native="on.click"
       />
@@ -56,6 +57,7 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
     if (this.validator) {
       this.$refs.input.validate(true)
     }
+    this.$refs.input.validate(true)
   }
 
   @Watch('value')
@@ -78,9 +80,22 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
     this.$emit('input', this.value_)
   }
 
+  isDate (value) {
+    return value && value.match(/^(3[01]|[12][0-9]|0?[1-9]).(1[012]|0?[1-9]).((?:19|20)\d{2})$/)
+  }
+
+  dateInputChanged (value) {
+    if (!value) {
+      this.dateChanged(null)
+    } else if (this.isDate(value)) {
+      const [day, month, year] = value.split('.')
+      this.dateChanged(new Date(year + '-' + month + '-' + day))
+    }
+  }
+
   dateChanged (date) {
     this.menu = false
-    this.value_ = new Date(date)
+    this.value_ = date ? new Date(date) : null
     this.$emit('input', this.value_)
   }
 
@@ -97,7 +112,23 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
   }
 
   get validationRules () {
-    return (this.validator && this.validator.getRules(this.label)) || []
+    const dateFormat = v => {
+      if (v && !this.isDate(v)) {
+        return 'Das Datum sollte das Format TT.MM.JJJJ haben.'
+      }
+      return true
+    }
+
+    let rules = []
+    if (this.validator) {
+      rules = this.validator.getRules(this.label)
+    }
+
+    if (this.type !== 'month') {
+      rules.push(dateFormat)
+    }
+
+    return rules
   }
 }
 </script>