feat: add prop time to show only time picker

src/calendar.vue

@@ -31,7 +31,7 @@
       <a
         v-show="panel === 'TIME'"
         class="mx-time-header"
-        @click="showPanelDate">{{timeHeader}}</a>
+        @click="handleTimeHeader">{{timeHeader}}</a>
     </div>
     <div class="mx-calendar-content">
       <panel-date
@@ -163,6 +163,9 @@ export default {
       }
     },
     timeHeader () {
+      if (this.type === 'time') {
+        return this.$parent.format
+      }
       return this.value && formatDate(this.value, this.dateFormat)
     },
     yearHeader () {
@@ -199,10 +202,13 @@ export default {
       }
     },
     init () {
-      if (this.type.toLowerCase() === 'month') {
+      const type = this.type
+      if (type === 'month') {
         this.panel = 'MONTH'
-      } else if (this.type.toLowerCase() === 'year') {
+      } else if (type === 'year') {
         this.panel = 'YEAR'
+      } else if (type === 'time') {
+        this.panel = 'TIME'
       } else {
         this.panel = 'DATE'
       }
@@ -330,6 +336,12 @@ export default {
     handleBtnMonth () {
       this.showPanelMonth()
     },
+    handleTimeHeader () {
+      if (this.type === 'time') {
+        return
+      }
+      this.showPanelDate()
+    },
     changePanelYears (flag) {
       this.firstYear = this.firstYear + flag * 10
     },

src/index.vue

@@ -61,7 +61,7 @@
       <calendar-panel
         v-if="!range"
         v-bind="$attrs"
-        :type="type"
+        :type="innerType"
         :date-format="innerDateFormat"
         :value="currentValue"
         :visible="popupVisible"
@@ -72,7 +72,7 @@
         <calendar-panel
           style="box-shadow:1px 0 rgba(0, 0, 0, .1)"
           v-bind="$attrs"
-          :type="type"
+          :type="innerType"
           :date-format="innerDateFormat"
           :value="currentValue[0]"
           :end-at="currentValue[1]"
@@ -82,7 +82,7 @@
           @select-time="selectStartTime"></calendar-panel>
         <calendar-panel
           v-bind="$attrs"
-          :type="type"
+          :type="innerType"
           :date-format="innerDateFormat"
           :value="currentValue[1]"
           :start-at="currentValue[0]"
@@ -138,7 +138,7 @@ export default {
     },
     type: {
       type: String,
-      default: 'date' // ['date', 'datetime'] zendy added 'month', 'year'
+      default: 'date' // ['date', 'datetime'] zendy added 'month', 'year', mxie added "time"
     },
     range: {
       type: Boolean,
@@ -239,6 +239,9 @@ export default {
     showClearIcon () {
       return !this.disabled && this.clearable && (this.range ? isValidRange(this.value) : isValidDate(this.value))
     },
+    innerType () {
+      return String(this.type).toLowerCase()
+    },
     innerShortcuts () {
       if (Array.isArray(this.shortcuts)) {
         return this.shortcuts
@@ -283,7 +286,7 @@ export default {
       if (this.dateFormat) {
         return this.dateFormat
       }
-      if (this.type === 'date') {
+      if (this.innerType === 'date') {
         return this.format
       }
       return this.format.replace(/[Hh]+.*[msSaAZ]|\[.*?\]/g, '').trim() || 'YYYY-MM-DD'

src/panel/time.js

@@ -19,13 +19,13 @@ export default {
   },
   computed: {
     currentHours () {
-      return new Date(this.value).getHours()
+      return this.value ? new Date(this.value).getHours() : 0
     },
     currentMinutes () {
-      return new Date(this.value).getMinutes()
+      return this.value ? new Date(this.value).getMinutes() : 0
     },
     currentSeconds () {
-      return new Date(this.value).getSeconds()
+      return this.value ? new Date(this.value).getSeconds() : 0
     }
   },
   methods: {

src/utils/index.js

@@ -12,7 +12,7 @@ export function isValidDate (date) {
   if (date === null || date === undefined) {
     return false
   }
-  return !!new Date(date).getTime()
+  return !isNaN(new Date(date).getTime())
 }
 
 export function isValidRange (date) {