@afeefa/vue-app 0.0.80 → 0.0.82

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

@@ -1 +1 @@
-0.0.80
+0.0.82

package/package.json

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

package/src/components/ADatePicker.vue

@@ -7,15 +7,17 @@
     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"
+        :error-messages="errorMessages"
+        :readonly="type === 'month'"
         v-on="on"
+        @input="dateInputChanged"
         @click:clear="clearDate"
         @click.native="on.click"
       />
@@ -44,6 +46,7 @@ import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 export default class ADatePicker extends Mixins(ComponentWidthMixin) {
   value_ = null
   menu = false
+  errorMessages = []
 
   created () {
     if (this.value) {
@@ -56,6 +59,7 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
     if (this.validator) {
       this.$refs.input.validate(true)
     }
+    this.$refs.input.validate(true)
   }
 
   @Watch('value')
@@ -63,6 +67,21 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
     this.value_ = this.value
   }
 
+  @Watch('value_')
+  value_Changed () { // validate on any change
+    this.errorMessages = []
+    if (this.validator) {
+      const rules = this.validator.getRules(this.label)
+      for (const rule of rules) {
+        const message = rule(this.value_)
+        if (typeof message === 'string') {
+          this.errorMessages.push(message)
+          break
+        }
+      }
+    }
+  }
+
   get date () {
     return this.value_
       ? this.value_.toISOString().substr(0, this.type === 'month' ? 7 : 10)
@@ -78,9 +97,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 +129,15 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
   }
 
   get validationRules () {
-    return (this.validator && this.validator.getRules(this.label)) || []
+    if (this.type !== 'month') {
+      const dateFormat = v => {
+        if (v && !this.isDate(v)) {
+          return 'Das Datum sollte das Format TT.MM.JJJJ haben.'
+        }
+        return true
+      }
+      return [dateFormat]
+    }
   }
 }
 </script>