添加手动输入功能

datepicker/index.vue

@@ -3,16 +3,18 @@
   :class="{'disabled': disabled}"
   :style="{'width': width + 'px','min-width':range ? (type === 'datetime' ? '320px' : '210px') : '140px'}"
   v-clickoutside="closePopup">
-    <input readonly
-          name="date"
+  <input name="date"
     :disabled="disabled"
     :class="inputClass"
     :value="text"
+    :readonly="!editable || range"
     :placeholder="innerPlaceholder"
     ref="input"
     @mouseenter="hoverIcon"
     @mouseleave="hoverIcon"
     @click="togglePopup"
+    @input="handleInput"
+    @change="handleChange"
     @mousedown="$event.preventDefault()">
   <i class="mx-input-icon"
     :class="showCloseIcon ? 'mx-input-icon__close' : 'mx-input-icon__calendar'"
@@ -24,15 +26,16 @@
     :style="position"
     ref="calendar"
     v-show="showPopup">
-
-      <calendar-panel 
-        v-if="!range"
+    <calendar-panel v-if="!range"
       v-model="currentValue"
       @select="selectDate"
       :show="showPopup"></calendar-panel>
-      <div v-else style="overflow:hidden" >
-        <div class="mx-datepicker-top" v-if="ranges.length">
-          <span v-for="range in ranges" @click="selectRange(range)">{{range.text}}</span>
+    <div v-else
+      style="overflow:hidden">
+      <div class="mx-datepicker-top"
+        v-if="ranges.length">
+        <span v-for="range in ranges"
+          @click="selectRange(range)">{{range.text}}</span>
       </div>
       <calendar-panel style="width:50%;box-shadow:1px 0 rgba(0, 0, 0, .1)"
         v-model="currentValue[0]"
@@ -45,11 +48,15 @@
         @select="selectDate"
         :show="showPopup"></calendar-panel>
     </div>
-      <div class="mx-datepicker-footer" v-if="confirm">
-        <button type="button" class="mx-datepicker-btn mx-datepicker-btn-confirm" @click="confirmDate"> {{ confirmText }}</button>
+    <div class="mx-datepicker-footer"
+      v-if="confirm">
+      <button type="button"
+        class="mx-datepicker-btn mx-datepicker-btn-confirm"
+        @click="confirmDate"> {{ confirmText }}</button>
     </div>
   </div>
 </div>
+
 </template>
 
 <script>
@@ -129,6 +136,10 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    editable: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -137,6 +148,7 @@ export default {
       showCloseIcon: false,
       currentValue: this.value,
       position: null,
+      userInput: '',
       ranges: [] // 快捷选项
     }
   },
@@ -156,6 +168,8 @@ export default {
     showPopup (val) {
       if (val) {
         this.$nextTick(this.displayPopup)
+      } else {
+        this.userInput = null
       }
     }
   },
@@ -173,7 +187,7 @@ export default {
     },
     text () {
       if (!this.range && this.isValidDate(this.value)) {
-        return this.stringify(this.value)
+        return this.userInput !== null ? this.userInput : this.stringify(this.value)
       }
       if (this.range && this.isValidRange(this.value)) {
         return (
@@ -184,10 +198,35 @@ export default {
     }
   },
   methods: {
+    handleInput (event) {
+      this.userInput = event.target.value
+    },
+    handleChange (event) {
+      const value = event.target.value
+      const date = this.parseDate(value, this.format)
+      if (date && this.editable && !this.range) {
+        if (this.notBefore && date < new Date(this.notBefore)) {
+          return
+        }
+        if (this.notAfter && date > new Date(this.notAfter)) {
+          return
+        }
+        for (let i = 0, len = this.disabledDays.length; i < len; i++) {
+          if (date.getTime() === new Date(this.disabledDays[i]).getTime()) {
+            return
+          }
+        }
+        this.$emit('input', date)
+        this.$emit('change', date)
+        this.closePopup()
+      }
+    },
     updateDate () {
       const val = this.currentValue
       if ((!this.range && val) || (this.range && val[0] && val[1])) {
         this.$emit('input', val)
+        this.$emit('change', val)
+        this.closePopup()
       }
     },
     confirmDate () {
@@ -232,11 +271,34 @@ export default {
       }
       if (this.showCloseIcon) {
         this.$emit('input', '')
+        this.$emit('change', '')
       } else {
         this.togglePopup()
       }
     },
-    formatDate(date, fmt = 'YYYY-MM-dd HH:mm:ss') {
+    parseDate (str, fmt = 'yyyy-MM-dd') {
+      let isValid = true
+      const obj = { y: 0, M: 1, d: 0, H: 0, h: 0, m: 0, s: 0 }
+      fmt.replace(/([^yMdHhms]*?)(([yMdHhms])\3*)([^yMdHhms]*?)/g, function (m, $1, $2, $3, $4, idx, old) {
+        const rgs = new RegExp($1 + '(\\d{' + $2.length + '})' + $4)
+        const index = str.search(rgs)
+        if (index === -1) {
+          isValid = false
+        } else {
+          str = str.replace(rgs, function (_m, _$1) {
+            obj[$3] = parseInt(_$1);
+            return ''
+          });
+        }
+        return ''
+      });
+      if (!isValid) {
+        return false
+      }
+      obj.M--
+      return new Date(obj.y, obj.M, obj.d, obj.H || obj.h, obj.m, obj.s)
+    },
+    formatDate (date, fmt = 'yyyy-MM-dd HH:mm:ss') {
       const hour = date.getHours()
       const map = {
         'M+': date.getMonth() + 1, // 月份
@@ -277,6 +339,7 @@ export default {
     },
     selectRange (range) {
       this.$emit('input', [range.start, range.end])
+      this.$emit('change', [range.start, range.end])
     },
     initRanges () {
       if (Array.isArray(this.shortcuts)) {
@@ -409,10 +472,14 @@ export default {
   border: 1px solid #ccc;
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  &:disabled, &.disabled {
+  &:disabled,
+  &.disabled {
     opacity: 0.7;
     cursor: not-allowed;
   }
+  &:focus {
+    outline: none;
+  }
 }
 
 .mx-input-icon {

demo/App.vue

@@ -3,7 +3,7 @@
     <div class="example">
         <section class="demo">
           <span class="label">default:</span>
-          <date-picker v-model="value1" lang="en"></date-picker>
+          <date-picker v-model="value1" lang="en" editable></date-picker>
         </section>
         <section class="demo">
           <span class="label">range:</span>
@@ -87,7 +87,7 @@ export default {
       value6: '',
       value7: '',
       value8: '',
-      demo1: '<date-picker v-model="value1" lang="en"></date-picker>\n<date-picker v-model="value3" range lang="en"></date-picker>',
+      demo1: '<date-picker v-model="value1" editable lang="en"></date-picker>\n<date-picker v-model="value3" range lang="en"></date-picker>',
       demo2: `<date-picker v-model="value3" type="datetime" format="yyyy-MM-dd HH:mm:ss" lang="en"></date-picker>\n<date-picker v-model="value4" type="datetime" format="yyyy-MM-dd hh:mm:ss a" :time-picker-options="{start: '00:00',step: '00:30',end: '23:30'}" lang="en"></date-picker>\n<date-picker v-model="value4" range type="datetime" format="yyyy-MM-dd HH:mm:ss" lang="en"></date-picker>`,
       demo3: '<date-picker v-model="value6" format="yyyy-MM-dd" lang="en" confirm></date-picker>\n<date-picker v-model="value7" lang="en" type="datetime" format="yyyy-MM-dd hh:mm:ss" confirm></date-picker>\n<date-picker v-model="value8" lang="en" range format="yyyy-MM-dd" confirm></date-picker>'
     }