feat: add prop time to show only time picker

mengxiong10 · Aug 8, 2018 · 1046731 · 1046731
1 parent 79cdce2
commit 1046731
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -71,7 +71,7 @@ export default {
 
 | Prop                | Type          | Default     | Description                                         |
 |---------------------|---------------|-------------|-----------------------------------------------------|
-| type                | String        | 'date'      | select date type (date/datetime/year/month)         |
+| type                | String        | 'date'      | select date type (date/datetime/year/month/time)    |
 | range               | Boolean       | false       | if true, the type is daterange or datetimerange     |
 | format              | String        | YYYY-MM-DD  | The parsing tokens are similar to the moment.js     |
 | lang                | String/Object | zh          | Translation (en/zh/es/pt-br/fr/ru/de/it/cs)(custom) |

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -71,7 +71,7 @@ export default {
 
 | Prop                | Type          | Default     | Description                                         
 |---------------------|---------------|-------------|-----------------------------------------------------
-| type                | String        | 'date'      | 选择日期或日期时间(可选：date,datetime,year,month)      
+| type                | String        | 'date'      | 选择日期或日期时间(可选：date,datetime,year,month,time)      
 | range               | Boolean       | false       | 如果是true， 显示日历范围选择     
 | format              | String        | YYYY-MM-DD  | 格式化显示日期 api类似moment.js     
 | lang                | String/Object | zh          | 选择语言或自定义 (en/zh/es/pt-br/fr/ru/de/it/cs)(custom) 

diff --git a/demo/index.js b/demo/index.js
@@ -17,7 +17,8 @@ new Vue({  // eslint-disable-line
       value8: '',
       value9: '',
       value10: new Date(),
-      value11: new Date()
+      value11: new Date(),
+      value12: ''
     }
   },
   methods: {
@@ -48,7 +49,8 @@ new Vue({  // eslint-disable-line
       'base': '<date-picker v-model="value1" lang="en" :not-before="new Date()"></date-picker>',
       'range': '<date-picker v-model="value2" range ></date-picker>',
       'month': '<date-picker v-model="value10" lang="en" type="month" format="YYYY-MM"></date-picker>',
-      'year': '<date-picker v-model="value11" lang="en" type="year" format="YYYY"></date-picker>'
+      'year': '<date-picker v-model="value11" lang="en" type="year" format="YYYY"></date-picker>',
+      'time': '<date-picker v-model="value12" lang="en" type="time" format="HH:mm:ss" placeholder="Select Time"></date-picker>'
     }
     const example2 = {
       'datetime': `

diff --git a/src/calendar.vue b/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
     },

diff --git a/src/index.vue b/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'

diff --git a/src/panel/time.js b/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: {

diff --git a/src/utils/index.js b/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) {