changes

components/datepicker/Datepicker.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="control has-icons-left" :id="docid">
+  <div :class="`dropdown ${ pos || ''} ${focused? 'is-active' : ''}`" style="width: 100%;">
+  <div class="dropdown-trigger" style="width: 100%;"> 
+    <input :disabled="disabled" :class="`input ${error? 'is-danger' : ''} ${disabled? 'has-text-dark' : ''}`" type="text" placeholder="MM/DD/YYYY" 
+    maxlength="10" @focus="setFocus" @blur="lostFocus" @keyup.enter="pressEnter" @keyup="checkDate" v-model="show" />
+  </div>
+  <div class="dropdown-menu" role="menu" @click="doClick()">
+    <div class="dropdown-content" style="min-width: 260px;">
+      <PickDay class="py-2 px-2" v-bind="{date: date}" @date="selectDate"></PickDay>
+    </div>
+  </div>
+  </div>
+  <span class="icon is-left">
+    <SvgIcon v-bind="{name: 'calendar.svg', type: 'gray', size: 21}"></SvgIcon>
+  </span>
+  </div>
+</template>
+<script>
+export default {
+  props: ['record', 'attr', 'position', 'mindate', 'maxdate', 'disabled'],
+  data() {
+    return {
+      date: undefined,
+      show: undefined,
+      error: false,
+      focused: false,
+      docid: this.$id(),
+      count1: 0,
+      count2: 0,
+      pos: undefined
+    }
+  },
+  created() {
+    this.getPos()
+    if(this.record) {
+      this.date = this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined
+      if(this.date) this.show = this.$dayjs(this.date).format('DD/MM/YYYY')
+    }
+  },
+  watch: {
+    record: function(newVal) {
+      if(this.record) {
+        this.date = this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined
+        if(this.date) this.show = this.$dayjs(this.date).format('DD/MM/YYYY')
+      }
+    }
+  },
+  methods: {
+    pressEnter() {
+      this.checkDate()
+      if(!this.error) this.focused = false
+    },
+    setFocus() {
+      this.focused = true
+      this.count1 = 0
+      this.count2 = 0
+    },
+    lostFocus() {
+      let self = this
+      setTimeout(()=>{
+        if(self.focused && self.count1===0) self.focused = false
+      }, 200)
+    },
+    processEvent(event) {
+      var doc = document.getElementById(this.docid)
+      if(!doc) return
+      this.count2 += 1
+      var isClickInside = false
+      isClickInside = doc.contains(event.target);
+      if(!isClickInside && this.focused) {
+        if(this.count2-1!==this.count1) {
+          this.focused = false
+          this.count1 = 0
+          this.count2 = 0
+        }
+      }
+    },
+    doClick() {
+      this.count1 += 1
+    },
+    selectDate(v) {
+      this.date = v
+      this.show = this.$dayjs(v).format('DD/MM/YYYY')
+      this.$emit('date', this.date)
+      if(this.focused) this.focused = false
+      this.count1 = 0
+      this.count2 = 0
+    },
+    getDate(value) {
+      let v = value.replace(/\D/g,'').slice(0, 10);
+      if (v.length >= 5) {
+        return `${v.slice(0,2)}/${v.slice(2,4)}/${v.slice(4)}`;
+      }
+      else if (v.length >= 3) {
+        return `${v.slice(0,2)}/${v.slice(2)}`;
+      }
+      return v
+    },
+    checkDate() {
+      if(!this.focused) this.setFocus()
+      this.error = false
+      this.date = undefined
+      if(this.$empty(this.show)) return this.$emit('date', null)
+      this.show = this.getDate(this.show)
+      let val = `${this.show.substring(6,10)}-${this.show.substring(3,5)}-${this.show.substring(0,2)}`
+      if(this.$dayjs(val, "YYYY-MM-DD", true).isValid()) {
+        this.date = val
+        this.$emit('date', this.date)
+      } else this.error = true
+    },
+    getPos() {
+      switch(this.position) {
+        case 'is-top-left':
+          this.pos = 'is-up is-left'
+          break;
+        case 'is-top-right':
+          this.pos = 'is-up is-right'
+          break;
+        case 'is-bottom-left':
+          this.pos = 'is-right'
+          break;
+        case 'is-bottom-right':
+          this.pos = 'is-right'
+          break;
+      }
+    }
+  }
+}
+</script>