add TimePicker

uiv-lib · Mar 29, 2017 · 0dce642 · 0dce642
1 parent 5afaaf5
commit 0dce642
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 19 deletions.
diff --git a/src/components/timepicker/TimePicker.vue b/src/components/timepicker/TimePicker.vue
@@ -4,13 +4,13 @@
       <tbody>
       <tr class="text-center">
         <td>
-          <a role="button" @click="changeTime(1,1)" id="hoursPlus">
+          <a role="button" @click="changeTime(1,1)">
             <i class="glyphicon glyphicon-chevron-up"></i>
           </a>
         </td>
         <td>&nbsp;</td>
         <td>
-          <a role="button" @click="changeTime(0,1)" id="minutesPlus">
+          <a role="button" @click="changeTime(0,1)">
             <i class="glyphicon glyphicon-chevron-up"></i>
           </a>
         </td>
@@ -23,6 +23,7 @@
                  @wheel.prevent="hoursWheel"
                  placeholder="HH"
                  v-model="hoursText"
+                 :readonly="readonlyInput"
                  size="2">
         </td>
         <td>&nbsp;<b>:</b>&nbsp;</td>
@@ -31,23 +32,24 @@
                  @wheel.prevent="minutesWheel"
                  placeholder="MM"
                  v-model="minutesText"
+                 :readonly="readonlyInput"
                  size="2">
         </td>
         <td v-if="showMeridian">
           &nbsp;
-          <button class="btn btn-default" id="toggleMeridian" v-text="meridian?'AM':'PM'"
+          <button class="btn btn-default" data-action="toggleMeridian" v-text="meridian?'AM':'PM'"
                   @click="toggleMeridian"></button>
         </td>
       </tr>
       <tr class="text-center">
         <td>
-          <a role="button" @click="changeTime(1,0)" id="hoursMinus">
+          <a role="button" @click="changeTime(1,0)">
             <i class="glyphicon glyphicon-chevron-down"></i>
           </a>
         </td>
         <td>&nbsp;</td>
         <td>
-          <a role="button" @click="changeTime(0,0)" id="minutesMinus">
+          <a role="button" @click="changeTime(0,0)">
             <i class="glyphicon glyphicon-chevron-down"></i>
           </a>
         </td>
@@ -76,6 +78,24 @@
       showMeridian: {
         type: Boolean,
         'default': true
+      },
+      min: {
+        type: Date()
+      },
+      max: {
+        type: Date()
+      },
+      hourStep: {
+        type: Number,
+        default: 1
+      },
+      minStep: {
+        type: Number,
+        default: 1
+      },
+      readonlyInput: {
+        type: Boolean,
+        default: false
       }
     },
     data () {
@@ -141,22 +161,22 @@
     methods: {
       changeTime (isHour, isPlus) {
         if (isHour && isPlus) {
-          this.hours = this.hours >= maxHours ? zero : this.hours + 1
+          this.hours = this.hours >= maxHours ? zero : this.hours + this.hourStep
         } else if (isHour && !isPlus) {
-          this.hours = this.hours <= zero ? maxHours : this.hours - 1
+          this.hours = this.hours <= zero ? maxHours : this.hours - this.hourStep
         } else if (!isHour && isPlus) {
           if (this.minutes >= maxMinutes) {
             this.minutes = zero
             this.changeTime(true, true)
           } else {
-            this.minutes += 1
+            this.minutes += this.minStep
           }
         } else if (!isHour && !isPlus) {
           if (this.minutes <= zero) {
             this.minutes = maxMinutes
             this.changeTime(true, false)
           } else {
-            this.minutes -= 1
+            this.minutes -= this.minStep
           }
         }
         this.setTime()

diff --git a/src/docs/PaginationDoc.vue b/src/docs/PaginationDoc.vue
@@ -7,7 +7,7 @@
     </div>
     <div class="row">
       <div class="col-md-6">
-        <div id="alertContainer">
+        <div>
           <pagination :boundary-links="boundaryLinks"
                       :direction-links="directionLinks"
                       :total-page="totalSize"

diff --git a/src/docs/TimePickerDoc.vue b/src/docs/TimePickerDoc.vue
@@ -8,15 +8,38 @@
     <div class="row">
       <div class="col-md-6">
         <div>
-          <time-picker v-model="myTime" :show-meridian="showMeridian"></time-picker>
+          <time-picker v-model="myTime"
+                       :show-meridian="showMeridian"
+                       :readonly-input="isReadOnly"
+                       :min-step="minStep"
+                       :hour-step="hourStep"></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">Set to 9:00 AM</button>
-            <button class="btn btn-default" @click="showMeridian=!showMeridian">12H / 24H</button>
-          </div>
+        <div class="well">
+          <form class="form-horizontal">
+            <div class="form-group">
+              <div class="col-xs-12">
+                <div class="form-inline">
+                  <div class="form-group">
+                    <button class="btn btn-default" @click="resetTime">Set to 9:00 AM</button>
+                    <button class="btn btn-default" @click="showMeridian=!showMeridian">12H / 24H</button>
+                    <button class="btn btn-default" @click="isReadOnly=!isReadOnly">is read only or not</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="form-group">
+              <div class="col-md-6">
+                <label>set hour step:</label>
+                <input class="form-control" v-model.number="hourStep" type="number">
+              </div>
+              <div class="col-md-6">
+                <label>set minutes step:</label>
+                <input class="form-control" v-model.number="minStep" type="number">
+              </div>
+            </div>
+          </form>
         </div>
       </div>
       <div class="col-md-6">
@@ -52,7 +75,12 @@
     data () {
       return {
         myTime: new Date(),
-        showMeridian: true
+        showMeridian: true,
+        isReadOnly: false,
+        hourStep: 1,
+        minStep: 1,
+        min: new Date(),
+        max: new Date()
       }
     },
     computed: {
@@ -62,6 +90,12 @@
     },
     mounted () {
       this.myTime = new Date()
+      this.min.setHours(8)
+      this.min.setMinutes(0)
+      this.min = new Date(this.min)
+      this.max.setHours(18)
+      this.max.setMinutes(0)
+      this.max = new Date(this.min)
     },
     methods: {
       resetTime () {

diff --git a/test/unit/specs/TimePickerDoc.spec.js b/test/unit/specs/TimePickerDoc.spec.js
@@ -10,7 +10,7 @@ describe('TimePickerDoc', () => {
     const vm = new Constructor().$mount()
     vm.$nextTick(() => {
       let now = new Date()
-      let toggleBtn = vm.$el.querySelector('#toggleMeridian')
+      let toggleBtn = vm.$el.querySelector('[data-action="toggleMeridian"]')
       let meridianText = toggleBtn.textContent
       if (now.getHours() > 12) {
         expect(meridianText).to.equal('PM')
@@ -19,7 +19,7 @@ describe('TimePickerDoc', () => {
       }
       toggleBtn.click()
       vm.$nextTick(() => {
-        toggleBtn = vm.$el.querySelector('#toggleMeridian')
+        toggleBtn = vm.$el.querySelector('[data-action="toggleMeridian"]')
         let meridianTextAfterClick = toggleBtn.textContent
         if (meridianText === 'PM') {
           expect(meridianTextAfterClick).to.equal('AM')