fix: pick minute will affect the hour (#168)

mengxiong10 · Mar 14, 2019 · 2afed88 · 2afed88
1 parent 6a990d8
commit 2afed88
Showing 1 changed file with 55 additions and 42 deletions.
diff --git a/src/panel/time.js b/src/panel/time.js
@@ -72,7 +72,8 @@ export default {
           let hours = Math.floor(timeMinutes / 60)
           let minutes = timeMinutes % 60
           let value = {
-            hours, minutes
+            hours,
+            minutes
           }
           result.push({
             value,
@@ -82,11 +83,13 @@ export default {
       }
       return result
     }
-
   },
   render (h) {
-    const date = new Date(this.value)
-    const disabledTime = typeof this.disabledTime === 'function' && this.disabledTime
+    const date = this.value
+      ? new Date(this.value)
+      : new Date().setHours(0, 0, 0, 0)
+    const disabledTime =
+      typeof this.disabledTime === 'function' && this.disabledTime
 
     let pickers = this.getTimeSelectOptions()
     if (Array.isArray(pickers) && pickers.length) {
@@ -98,59 +101,74 @@ export default {
           <li
             class={{
               'mx-time-picker-item': true,
-              'cell': true,
-              'actived': pickHours === this.currentHours && pickMinutes === this.currentMinutes,
-              'disabled': disabledTime && disabledTime(time)
+              cell: true,
+              actived:
+                pickHours === this.currentHours &&
+                pickMinutes === this.currentMinutes,
+              disabled: disabledTime && disabledTime(time)
             }}
-            onClick={this.pickTime.bind(this, time)}>{picker.label}</li>
+            onClick={this.pickTime.bind(this, time)}
+          >
+            {picker.label}
+          </li>
         )
       })
       return (
         <div class="mx-panel mx-panel-time">
-          <ul class="mx-time-list">
-            {pickers}
-          </ul>
+          <ul class="mx-time-list">{pickers}</ul>
         </div>
       )
     }
 
     const hours = Array.apply(null, { length: 24 }).map((_, i) => {
       const time = new Date(date).setHours(i)
-      return <li
-        class={{
-          'cell': true,
-          'actived': i === this.currentHours,
-          'disabled': disabledTime && disabledTime(time)
-        }}
-        onClick={this.selectTime.bind(this, time)}
-      >{this.stringifyText(i)}</li>
+      return (
+        <li
+          class={{
+            cell: true,
+            actived: i === this.currentHours,
+            disabled: disabledTime && disabledTime(time)
+          }}
+          onClick={this.selectTime.bind(this, time)}
+        >
+          {this.stringifyText(i)}
+        </li>
+      )
     })
 
     const step = this.minuteStep || 1
     const length = parseInt(60 / step)
     const minutes = Array.apply(null, { length }).map((_, i) => {
       const value = i * step
       const time = new Date(date).setMinutes(value)
-      return <li
-        class={{
-          'cell': true,
-          'actived': value === this.currentMinutes,
-          'disabled': disabledTime && disabledTime(time)
-        }}
-        onClick={this.selectTime.bind(this, time)}
-      >{this.stringifyText(value)}</li>
+      return (
+        <li
+          class={{
+            cell: true,
+            actived: value === this.currentMinutes,
+            disabled: disabledTime && disabledTime(time)
+          }}
+          onClick={this.selectTime.bind(this, time)}
+        >
+          {this.stringifyText(value)}
+        </li>
+      )
     })
 
     const seconds = Array.apply(null, { length: 60 }).map((_, i) => {
       const time = new Date(date).setSeconds(i)
-      return <li
-        class={{
-          'cell': true,
-          'actived': i === this.currentSeconds,
-          'disabled': disabledTime && disabledTime(time)
-        }}
-        onClick={this.selectTime.bind(this, time)}
-      >{this.stringifyText(i)}</li>
+      return (
+        <li
+          class={{
+            cell: true,
+            actived: i === this.currentSeconds,
+            disabled: disabledTime && disabledTime(time)
+          }}
+          onClick={this.selectTime.bind(this, time)}
+        >
+          {this.stringifyText(i)}
+        </li>
+      )
     })
 
     let times = [hours, minutes]
@@ -159,16 +177,11 @@ export default {
     }
 
     times = times.map(list => (
-      <ul class="mx-time-list"
-        style={{ width: 100 / times.length + '%' }}>
+      <ul class="mx-time-list" style={{ width: 100 / times.length + '%' }}>
         {list}
       </ul>
     ))
 
-    return (
-      <div class="mx-panel mx-panel-time">
-        {times}
-      </div>
-    )
+    return <div class="mx-panel mx-panel-time">{times}</div>
   }
 }