添加time-picker-options

README.md

@@ -46,24 +46,24 @@ export default {
 ```
 ## Attributes
 
-| Prop              | Type          | Default     | Description                                       |
+| Prop                | Type          | Default     | Description                                       |
-|-------------------|---------------|-------------|---------------------------------------------------|
+|---------------------|---------------|-------------|---------------------------------------------------|
-| type              | String        | 'date'      | select datepicker or datetimepicker(date/datetime)|
+| type                | String        | 'date'      | select datepicker or datetimepicker(date/datetime)|
-| range             | Boolean       | false       | if true, the type is daterange or datetimerange   |
+| range               | Boolean       | false       | if true, the type is daterange or datetimerange   |
-| confirm           | Boolean       | false       | if true, need click the button to change the value|
+| confirm             | Boolean       | false       | if true, need click the button to change the value|
-| format            | String        | yyyy-MM-dd  | Date formatting string                            |
+| format              | String        | yyyy-MM-dd  | Date formatting string                            |
-| lang              | String        | zh          | Translation (en/zh/es/pt-br/fr/ru/de/it/cs)       |
+| lang                | String        | zh          | Translation (en/zh/es/pt-br/fr/ru/de/it/cs)       |
-| placeholder       | String        |             | input placeholder text                            |
+| placeholder         | String        |             | input placeholder text                            |
-| width             | String/Number | 210         | input size                                        |
+| width               | String/Number | 210         | input size                                        |
-| disabled-days     | Array         | []          | Days in YYYY-MM-DD format to disable              |
+| disabled-days       | Array         | []          | Days in YYYY-MM-DD format to disable              |
-| not-before        | String/Date   | ''          | Disable all dates before new Date(not-before)     |
+| not-before          | String/Date   | ''          | Disable all dates before new Date(not-before)     |
-| not-after         | String/Date   | ''          | Disable all dates after new Date(not-after)       |
+| not-after           | String/Date   | ''          | Disable all dates after new Date(not-after)       |
-| shortcuts         | Boolean/Array | true        | the shortcuts for the range picker                |
+| shortcuts           | Boolean/Array | true        | the shortcuts for the range picker                |
-| first-day-of-week | Number        | 7           | set the first day of week (1-7)                   |
+| time-picker-options | Object        | {}          | set timePickerOptions(start, step, end)           |
-| minute-step       | Number        | 0           | if > 0 don't show the second picker(0 - 60)       |
+| minute-step         | Number        | 0           | if > 0 don't show the second picker(0 - 60)       |
-| input-class       | String        | 'mx-input'  | the input class name                              |
+| first-day-of-week   | Number        | 7           | set the first day of week (1-7)                   |
-| confirm-text      | String        | 'OK'        | the default text to display on confirm button     |
+| input-class         | String        | 'mx-input'  | the input class name                              |
-
+| confirm-text        | String        | 'OK'        | the default text to display on confirm button     |
 
 ## shortcuts
 * true -      show the default shortcuts
@@ -76,6 +76,16 @@ export default {
 | start           | Date          | Start Date             |
 | end             | Date          | End Date               |
 
+## time-picker-options
+* Object[] -  custom shortcuts, [{start, step, end}]
+
+| Prop            | Type          |  Description           |
+|-----------------|---------------|------------------------|
+| start           | String        | startTime (eg '00:00') |
+| step            | String        | stepTime  (eg '00:30') |
+| end             | String        | endTime   (eg '23:30') |
+
+
 ## Events
 | Name            | Description                  |  Callback Arguments    |
 |-----------------|------------------------------|------------------------|

datepicker/calendar-panel.vue

@@ -32,7 +32,17 @@
       </div>
       <div class="mx-calendar-time"
         v-show="currentPanel === 'time'" >
-        <div class="mx-time-list-wrapper" 
+        <div v-if="timeSelectOptions.length" class="mx-time-list-wrapper">
+          <ul class="mx-time-list">
+            <li class="mx-time-item mx-time-picker-item"
+              :class="getTimeClasses(item.value.hours * 60 + item.value.minutes, -1)"
+              @click="pickTime(item.value)"
+              v-for="item in timeSelectOptions">
+              {{item.label}}
+            </li>
+          </ul>
+        </div>
+        <div v-else class="mx-time-list-wrapper" 
           :style="{width: 100 / times.length + '%' }"
           v-for="(time, index) in times" 
           :key="index">
@@ -51,11 +61,36 @@
 </template>
 
 <script>
-function getTimeArray(len, step = 1) {
+const getTimeArray = function (len, step = 1) {
   const length = parseInt(len / step)
   return Array.apply(null, { length }).map((v, i) => i * step)
 }
 
+const parseTime = function(time) {
+  const values = (time || '').split(':');
+  if (values.length >= 2) {
+    const hours = parseInt(values[0], 10);
+    const minutes = parseInt(values[1], 10);
+    return {
+      hours,
+      minutes
+    }
+  }
+  return null;
+}
+
+const formatTime = function(time, type="24") {
+  let hours = time.hours
+  hours = (type === '24') ? hours : (hours % 12 || 12)
+  hours = hours < 10 ? '0' + hours : hours
+  let minutes = time.minutes < 10 ? '0' + time.minutes : time.minutes
+  let result = hours + ':' + minutes
+  if (type === '12') {
+    result += time.hours >= 12 ? ' pm' : ' am'
+  }
+  return result
+}
+
 export default {
   props: {
     startAt: null,
@@ -86,6 +121,39 @@ export default {
       const firstday = +this.$parent.firstDayOfWeek
       return days.concat(days).slice(firstday, firstday + 7)
     },
+    timeType () {
+      return /h+/.test(this.$parent.format) ? '12' : '24'
+    },
+    timeSelectOptions () {
+      const result = []
+      const options = this.$parent.timePickerOptions
+      if (!options) {
+        return []
+      }
+      const start = parseTime(options.start)
+      const end = parseTime(options.end)
+      const step = parseTime(options.step)
+      if (start && end && step) {
+        const startMinutes = start.minutes + start.hours * 60;
+        const endMinutes = end.minutes + end.hours * 60;
+        const stepMinutes = step.minutes + step.hours * 60
+        const len = Math.floor((endMinutes - startMinutes) / stepMinutes)
+        for (let i = 0; i <= len; i++) {
+          let timeMinutes = startMinutes + i * stepMinutes
+          let hours = Math.floor(timeMinutes/60)
+          let minutes = timeMinutes % 60
+          let value = {
+            hours, minutes
+          }
+          result.push({
+            value,
+            label: formatTime(value, this.timeType)
+          })
+        }        
+      }
+
+      return result
+    },
     currentYear() {
       return this.now.getFullYear()
     },
@@ -232,6 +300,10 @@ export default {
       const endTime = this.endAt ? new Date(this.endAt) : 0
       const classes = []
       switch (index) {
+        case -1:
+          curValue = this.curHour * 60 + this.curMinute
+          cellTime = new Date(this.now).setHours(Math.floor(value / 60), value % 60, 0)
+          break
         case 0:
           curValue = this.curHour
           cellTime = new Date(this.now).setHours(value)
@@ -369,6 +441,17 @@ export default {
       this.now = date
       this.$emit('input', date)
       this.$emit('select')
+    },
+    pickTime (value) {
+      const classes = this.getTimeClasses(value.hours * 60 + value.minutes, -1)
+      if (classes.indexOf('disabled') !== -1) {
+        return
+      }
+      const date = new Date(this.now)
+      date.setHours(value.hours, value.minutes, 0)
+      this.now = date
+      this.$emit('input', date)
+      this.$emit('select')      
     }
   }
 }
@@ -481,7 +564,7 @@ export default {
 
 .mx-time-list-wrapper {
   display: inline-block;
-  width: 50%;
+  width: 100%;
   height: 100%;
   border-top: 1px solid rgba(0, 0, 0, 0.05);
   border-left: 1px solid rgba(0, 0, 0, 0.05);
@@ -508,12 +591,15 @@ export default {
 .mx-time-list-wrapper:first-child {
   border-left: 0;
 }
+.mx-time-picker-item {
+  text-align: left;
+  padding-left: 10px;
+}
 
 .mx-time-list {
   margin: 0;
   padding: 0;
   list-style: none;
-  text-align: center;
 }
 .mx-time-item {
   width: 100%;

datepicker/index.vue

@@ -103,6 +103,12 @@ export default {
       default: 0,
       validator: val => val >= 0 && val <= 60
     },
+    timePickerOptions: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
     confirm: {
       type: Boolean,
       default: false
@@ -215,21 +221,25 @@ export default {
         this.togglePopup()
       }
     },
-    formatDate(date, fmt) {
+    formatDate(date, fmt = 'YYYY-MM-dd HH:mm:ss') {
+      const hour = date.getHours()
       const map = {
         'M+': date.getMonth() + 1, // 月份
         '[Dd]+': date.getDate(), // 日
-        '[Hh]+': date.getHours(), // 小时
+        'H+': hour, // 小时
+        'h+': (hour % 12) || 12, // 小时
         'm+': date.getMinutes(), // 分
         's+': date.getSeconds(), // 秒
         'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
-        S: date.getMilliseconds() // 毫秒
+        S: date.getMilliseconds(), // 毫秒
+        'a': hour >= 12 ? 'pm' : 'am',
+        'A': hour >= 12 ? 'PM' : 'AM'
       }
-      let str = fmt.replace(/[Yy]+/g, function(str) {
+      let str = fmt.replace(/[Yy]+/g, function (str) {
         return ('' + date.getFullYear()).slice(4 - str.length)
       })
       Object.keys(map).forEach(key => {
-        str = str.replace(new RegExp(key), function(str) {
+        str = str.replace(new RegExp(key), function (str) {
           const value = '' + map[key]
           return str.length === 1 ? value : ('00' + value).slice(value.length)
         })

demo/App.vue

@@ -18,7 +18,12 @@
         </section>
         <section class="demo">
           <span class="label">datetime with minute-step picker:</span>
-          <date-picker v-model="value4" lang="en" type="datetime" format="yyyy-MM-dd HH:mm" :minute-step="10"></date-picker>
+          <date-picker v-model="value4" lang="en" type="datetime" format="yyyy-MM-dd hh:mm:ss a"
+          :time-picker-options="{
+            start: '00:00',
+            step: '00:30',
+            end: '23:30'
+          }"></date-picker>
         </section>
         <section class="demo">
           <span class="label">datetime range:</span>
@@ -83,7 +88,7 @@ export default {
       value7: '',
       value8: '',
       demo1: '<date-picker v-model="value1" lang="en"></date-picker>\n<date-picker v-model="value3" range lang="en"></date-picker>',
-      demo2: '<date-picker v-model="value3" type="datetime" format="yyyy-MM-dd HH:mm:ss" lang="en"></date-picker>\n<date-picker v-model="value4" type="datetime" format="yyyy-MM-dd HH:mm" :minute-step="10" lang="en"></date-picker>\n<date-picker v-model="value4" range type="datetime" format="yyyy-MM-dd HH:mm:ss" lang="en"></date-picker>',
+      demo2: `<date-picker v-model="value3" type="datetime" format="yyyy-MM-dd HH:mm:ss" lang="en"></date-picker>\n<date-picker v-model="value4" type="datetime" format="yyyy-MM-dd hh:mm:ss a" :time-picker-options="{start: '00:00',step: '00:30',end: '23:30'}" lang="en"></date-picker>\n<date-picker v-model="value4" range type="datetime" format="yyyy-MM-dd HH:mm:ss" lang="en"></date-picker>`,
       demo3: '<date-picker v-model="value6" format="yyyy-MM-dd" lang="en" confirm></date-picker>\n<date-picker v-model="value7" lang="en" type="datetime" format="yyyy-MM-dd hh:mm:ss" confirm></date-picker>\n<date-picker v-model="value8" lang="en" range format="yyyy-MM-dd" confirm></date-picker>'
     }
   },

package.json

@@ -2,7 +2,7 @@
   "name": "vue2-datepicker",
   "description": "A Datepicker Component For Vue2",
   "main": "dist/build.js",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"