update timepicker

uiv-lib · Mar 28, 2017 · 282456e · 282456e
1 parent 41bc5b0
commit 282456e
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 75 deletions.
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "babel-preset-latest": "^6.22.0",
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.22.0",
+    "babel-runtime": "^6.23.0",
     "chai": "^3.5.0",
     "chalk": "^1.1.3",
     "chromedriver": "^2.27.2",

diff --git a/src/components/timepicker/TimePicker.vue b/src/components/timepicker/TimePicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <section :class="{'invalid':hoursInvalid||minutesInvalid}">
+  <section>
     <table>
       <tbody>
       <tr class="text-center">
@@ -20,23 +20,23 @@
       <tr>
         <td class="form-group">
           <input class="form-control text-center"
-                 :class="{'invalid':hoursInvalid}"
                  @wheel.prevent="hoursWheel"
                  placeholder="HH"
-                 v-model.lazy="hoursText"
+                 v-model="hoursText"
                  size="2">
         </td>
-        <td>:</td>
+        <td>&nbsp;<b>:</b>&nbsp;</td>
         <td class="form-group">
           <input class="form-control text-center"
-                 :class="{'invalid':minutesInvalid}"
                  @wheel.prevent="minutesWheel"
                  placeholder="MM"
-                 v-model.lazy="minutesText"
+                 v-model="minutesText"
                  size="2">
         </td>
         <td v-if="showMeridian">
-          <button class="btn btn-default" id="toggleMeridian" v-text="meridian?'AM':'PM'" @click="toggleMeridian"></button>
+          &nbsp;
+          <button class="btn btn-default" id="toggleMeridian" v-text="meridian?'AM':'PM'"
+                  @click="toggleMeridian"></button>
         </td>
       </tr>
       <tr class="text-center">
@@ -60,12 +60,15 @@
 </template>
 
 <script>
-  const maxDigits = 9
+  import utils from './../../utils/stringUtils'
+
   const maxHours = 23
   const zero = 0
   const maxMinutes = 59
-  const cutPuAmAndPm = 12
+  const cutUpAmAndPm = 12
+
   export default {
+    // min, max, hour-step, min-step, readonly-input
     props: {
       value: {
         type: Date
@@ -81,80 +84,66 @@
         minutes: 0,
         meridian: true,
         hoursText: '',
-        minutesText: '',
-        hoursInvalid: false,
-        minutesInvalid: false
+        minutesText: ''
       }
     },
     watch: {
       value (value) {
-        try {
-          this.hours = value.getHours()
-          if (!this.showMeridian) {
-            this.hoursText = (this.hours > maxDigits ? '' : '0') + this.hours
+        this.hours = value.getHours()
+        if (!this.showMeridian) {
+          this.hoursText = utils.pad(this.hours, 2)
+        } else {
+          if (this.hours >= cutUpAmAndPm) {
+            if (this.hours === cutUpAmAndPm) {
+              this.hoursText = this.hours + ''
+            } else {
+              this.hoursText = utils.pad(this.hours - cutUpAmAndPm, 2)
+            }
+            this.meridian = false
           } else {
-            if (value.getHours() >= cutPuAmAndPm) {
-              if (value.getHours() === cutPuAmAndPm) {
-                this.hoursText = this.hours + ''
-              } else {
-                this.hoursText = (this.hours - cutPuAmAndPm > maxDigits ? '' : '0') + (this.hours - cutPuAmAndPm)
-              }
-              this.meridian = false
+            if (this.hours === zero) {
+              this.hoursText = cutUpAmAndPm.toString()
             } else {
-              if (this.hours === zero) {
-                this.hoursText = cutPuAmAndPm.toString()
-              } else {
-                this.hoursText = (this.hours > maxDigits ? '' : '0') + this.hours
-              }
-              this.meridian = true
+              this.hoursText = utils.pad(this.hours, 2)
             }
+            this.meridian = true
           }
-          this.minutes = value.getMinutes()
-          this.minutesText = (this.minutes > maxDigits ? '' : '0') + this.minutes
-        } catch (e) {
-          //
         }
+        this.minutes = value.getMinutes()
+        this.minutesText = utils.pad(this.minutes, 2)
       },
       showMeridian (value) {
         this.setTime()
       },
       hoursText (value) {
-        let hoursStr = parseInt(value)
+        let hour = parseInt(value)
         if (this.showMeridian) {
-          if (hoursStr >= 1 && hoursStr <= cutPuAmAndPm) {
-            this.hoursInvalid = false
-            this.hours = hoursStr + cutPuAmAndPm
-            this.setTime()
-          } else {
-            this.hoursInvalid = true
-          }
-        } else {
-          if (hoursStr >= zero && hoursStr <= maxHours) {
-            this.hoursInvalid = false
-            this.hours = hoursStr
-            this.setTime()
-          } else {
-            this.hoursInvalid = true
+          if (hour >= 1 && hour <= cutUpAmAndPm) {
+            if (this.meridian) {
+              this.hours = hour === cutUpAmAndPm ? 0 : hour
+            } else {
+              this.hours = hour === cutUpAmAndPm ? cutUpAmAndPm : hour + cutUpAmAndPm
+            }
           }
+        } else if (hour >= zero && hour <= maxHours) {
+          this.hours = hour
         }
+        this.setTime()
       },
       minutesText (value) {
         let minutesStr = parseInt(value)
         if (minutesStr >= zero && minutesStr <= maxMinutes) {
-          this.minutesInvalid = false
           this.minutes = minutesStr
-          this.setTime()
-        } else {
-          this.minutesInvalid = true
         }
+        this.setTime()
       }
     },
     methods: {
       changeTime (isHour, isPlus) {
         if (isHour && isPlus) {
-          (this.hours >= maxHours) ? this.hours = zero : this.hours += 1
+          this.hours = this.hours >= maxHours ? zero : this.hours + 1
         } else if (isHour && !isPlus) {
-          (this.hours <= zero) ? this.hours = maxHours : this.hours -= 1
+          this.hours = this.hours <= zero ? maxHours : this.hours - 1
         } else if (!isHour && isPlus) {
           if (this.minutes >= maxMinutes) {
             this.minutes = zero
@@ -175,38 +164,30 @@
       toggleMeridian () {
         this.meridian = !this.meridian
         if (this.meridian) {
-          this.hours -= cutPuAmAndPm
+          this.hours -= cutUpAmAndPm
         } else {
-          this.hours += cutPuAmAndPm
+          this.hours += cutUpAmAndPm
         }
         this.setTime()
       },
       minutesWheel (e) {
-        if (e.deltaY > 0) {
-          this.changeTime(false, false)
-        } else {
-          this.changeTime(false, true)
-        }
+        this.changeTime(false, e.deltaY < 0)
       },
       hoursWheel (e) {
-        if (e.deltaY > 0) {
-          this.changeTime(true, false)
-        } else {
-          this.changeTime(true, true)
-        }
+        this.changeTime(true, e.deltaY < 0)
       },
       setTime () {
-        let time = new Date()
+        let time = this.value
         time.setHours(this.hours)
         time.setMinutes(this.minutes)
-        this.$emit('input', time)
+        this.$emit('input', new Date(time))
       }
     }
   }
 </script>
 
 <style lang="less" rel="stylesheet/less" scoped>
-  .invalid {
-    border: 1px solid red !important;
+  input {
+    width: 50px;
   }
 </style>
diff --git a/src/docs/TimePickerDoc.vue b/src/docs/TimePickerDoc.vue
@@ -9,23 +9,25 @@
       <div class="col-md-6">
         <div>
           <time-picker v-model="myTime" :show-meridian="showMeridian"></time-picker>
+          <br/>
           <div class="alert alert-info">Time is:{{timeString}}</div>
         </div>
         <div class="form-inline">
           <div class="form-group">
-            <button class="btn btn-default" @click="resetTime">设置9:00</button>
-            <button class="btn btn-default" @click="showMeridian=!showMeridian">12H/24H</button>
+            <button class="btn btn-default" @click="resetTime">Set to 9:00 AM</button>
+            <button class="btn btn-default" @click="showMeridian=!showMeridian">12H / 24H</button>
           </div>
         </div>
       </div>
       <div class="col-md-6">
         <h4>Notes</h4>
         <ul>
-          <li>Use <code>v-model:Date</code> to identify the time</li>
+          <li><p>Use <code>v-model:Date</code> to identify the time</p></li>
+          <li><p>Make sure to update the date object reference when try to change it from outside the component. E.g. <code>model = new Date(model)</code></p></li>
         </ul>
         <h4>Props</h4>
         <ul>
-          <li><code>show-meridian: Boolean</code> Whether to display 12H or 24H mode.Default:true</li>
+          <li><p><code>show-meridian: Boolean</code> Whether to display 12H or 24H mode.Default:true</p></li>
         </ul>
       </div>
     </div>

diff --git a/src/utils/stringUtils.js b/src/utils/stringUtils.js
@@ -0,0 +1,11 @@
+'use strict'
+
+export default {
+  pad (value, num) {
+    value = value + ''
+    for (let i = num - value.length; i > 0; i--) {
+      value = '0' + value
+    }
+    return value
+  }
+}
diff --git a/test/unit/specs/TimePickerDoc.spec.js b/test/unit/specs/TimePickerDoc.spec.js
@@ -21,7 +21,7 @@ describe('TimePickerDoc', () => {
       vm.$nextTick(() => {
         toggleBtn = vm.$el.querySelector('#toggleMeridian')
         let meridianTextAfterClick = toggleBtn.textContent
-        if (meridianText == 'PM') {
+        if (meridianText === 'PM') {
           expect(meridianTextAfterClick).to.equal('AM')
         } else {
           expect(meridianTextAfterClick).to.equal('PM')