Merge branch 'dev' of github.com:didi/cube-ui into doc-dev

document/common/config/menu.json

@@ -110,6 +110,7 @@
             "toast": "Toast",
             "picker": "Picker",
             "cascade-picker": "CascadePicker",
+            "date-picker": "DatePicker",
             "time-picker": "TimePicker",
             "dialog": "Dialog",
             "action-sheet": "ActionSheet"

document/components/docs/en-US/cascade-picker.md

@@ -213,7 +213,6 @@
     }
   }
   ```
-  One more thing, although `setData` is available when visible, considering user experience, you can't change the number of columns when the picker is visible.
 
 ### Props configuration
 

document/components/docs/zh-CN/cascade-picker.md

@@ -204,8 +204,6 @@
   }
   ```
   
-  值得注意的一点是，虽然不管选择器显示前后，都可以`setData`，但是为了体验，在显示后`setData`，所传入的数据结构，必须与之前的列数相同，也就是说如果之前是三列选择器，显示时`setData`还得是三列。
-  
 ### Props 配置
 
 | 参数 | 说明 | 类型 | 默认值 | 示例 |

document/components/docs/zh-CN/date-picker.md

+## DatePicker 组件
+
+日期选择器，可用于日期选择，选择粒度的灵活配置，如年月日、时分秒、年月日时分秒、年月等。
+
+### 示例
+
+- 基本用法
+
+  通过 `$createDatePicker` 创建一个组件实例，配置 `min`、`max` 设定选择的日期范围，还可以通过 `value` 设置当前选择的日期。
+
+  ```html
+  <cube-button @click="showDatePicker">Date Picker</cube-button>
+  ```
+  ```js
+  export default {
+    mounted () {
+      this.datePicker = this.$createDatePicker({
+        title: 'Date Picker',
+        min: new Date(2008, 7, 8),
+        max: new Date(2020, 9, 20),
+        value: new Date(),
+        onSelect: this.selectHandle,
+        onCancel: this.cancelHandle
+      })
+    },
+    methods: {
+      showDatePicker() {
+        this.datePicker.show()
+      },
+      selectHandle(date, selectedVal, selectedText) {
+        this.$createDialog({
+          type: 'warn',
+          content: `Selected Item: <br/> - date: ${date} <br/> - value: ${selectedVal.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
+          icon: 'cubeic-alert'
+        }).show()
+      },
+      cancelHandle() {
+        this.$createToast({
+          type: 'correct',
+          txt: 'Picker canceled',
+          time: 1000
+        }).show()
+      }
+    }
+  }
+  ```
+
+- 列的配置
+
+  `DatePicker` 有一个非常灵活的能力，就是可以配置列，总共是年、月、日、时、分、秒六种的列，你可以通过 `startColumn` 和 `columnCount` 来配置起始列和列数，比如默认的”年月日“选择，是从“年”开始的“三列”，而时分秒，则是从“时”开始的“三列”。
+  
+  ```html
+  <cube-button @click="showTimePicker">Time Picker</cube-button>
+  ```
+  ```js
+  export default {
+    mounted () {
+      this.timePicker = this.$createDatePicker({
+        title: 'Time Picker',
+        min: new Date(2008, 7, 8, 8, 0, 0),
+        max: new Date(2008, 7, 8, 20, 59, 59),
+        value: new Date(2008, 7, 8, 12, 30, 30),
+        startColumn: 'hour',
+        onSelect: this.selectHandle,
+        onCancel: this.cancelHandle
+      })
+    },
+    methods: {
+      showTimePicker() {
+        this.timePicker.show()
+      },
+      selectHandle(date, selectedVal, selectedText) {
+        this.$createDialog({
+          type: 'warn',
+          content: `Selected Item: <br/> - date: ${date} <br/> - value: ${selectedVal.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
+          icon: 'cubeic-alert'
+        }).show()
+      },
+      cancelHandle() {
+        this.$createToast({
+          type: 'correct',
+          txt: 'Picker canceled',
+          time: 1000
+        }).show()
+      }
+    }
+  }
+  ```
+
+- 年月日时分秒选择器
+
+  同理，如果想要年月日时分秒选择器，则是以“年”开始的六列。
+
+  ```html
+  <cube-button @click="showDateTimePicker">Date Time Picker</cube-button>
+  ```
+  ```js
+  export default {
+    mounted () {
+      this.dateTimePicker = this.$createDatePicker({
+        title: 'Date Time Picker',
+        min: new Date(2008, 7, 8, 8, 0, 0),
+        max: new Date(2020, 9, 20, 20, 59, 59),
+        value: new Date(),
+        columnCount: 6,
+        onSelect: this.selectHandle,
+        onCancel: this.cancelHandle
+      })
+    },
+    methods: {
+      showDateTimePicker() {
+        this.dateTimePicker.show()
+      },
+      selectHandle(date, selectedVal, selectedText) {
+        this.$createDialog({
+          type: 'warn',
+          content: `Selected Item: <br/> - date: ${date} <br/> - value: ${selectedVal.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
+          icon: 'cubeic-alert'
+        }).show()
+      },
+      cancelHandle() {
+        this.$createToast({
+          type: 'correct',
+          txt: 'Picker canceled',
+          time: 1000
+        }).show()
+      }
+    }
+  }
+  ```
+
+- `$updateProps`
+
+  通过`$updateProps`方法，可以修改用 createAPI 创建的组件实例的属性。比如 `DatePicker`中，我们可以修改 `value` 属性的值改变当前选择的日期。
+
+  ```html
+  <cube-button @click="showUpdatePropsPicker">Use $updateProps</cube-button>
+  ```
+  ```js
+  export default {
+    mounted () {
+      this.updatePropsPicker = this.$createDatePicker({
+        title: 'Use $updateProps',
+        min: new Date(2008, 7, 8),
+        max: new Date(2020, 9, 20),
+        value: new Date(),
+        onSelect: this.selectHandle,
+        onCancel: this.cancelHandle
+      })
+    },
+    methods: {
+      showUpdatePropsPicker() {
+        this.updatePropsPicker.show()
+        setTimeout(() => {
+          this.updatePropsPicker.$updateProps({
+            title: 'updated',
+            value: new Date(2010, 9, 1)
+          })
+        }, 1000)
+      },
+      selectHandle(date, selectedVal, selectedText) {
+        this.$createDialog({
+          type: 'warn',
+          content: `Selected Item: <br/> - date: ${date} <br/> - value: ${selectedVal.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
+          icon: 'cubeic-alert'
+        }).show()
+      },
+      cancelHandle() {
+        this.$createToast({
+          type: 'correct',
+          txt: 'Picker canceled',
+          time: 1000
+        }).show()
+      }
+    }
+  }
+  ```
+  
+### Props 配置
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 | 示例 |
+| - | - | - | - | - | - |
+| min | 可选范围的最小值 | Date, Array | - | new Date(2010, 1, 1) | new Date(2008, 7, 8) |
+| max | 可选范围的最大值 | Date, Array | - | new Date(2020, 12, 31) | new Date(2020, 9, 20) |
+| value | 当前选择的日期 | Date, Array | - | 可选范围的最小值 | new Date() |
+| startColumn | 起始列 | String | year/month/date/hour/minute/second| year | hour |
+| columnCount | 列数 | Number | - | 3 | 6 |
+| title | 标题 | String | - | '' | - |
+| cancelTxt | 取消按钮文案 | String | - | '取消' | - |
+| confirmTxt | 确定按钮文案 | String | - | '确定' | - |
+| swipeTime | 快速滑动选择器滚轮时，惯性滚动动画的时长，单位：ms | Number | - | 2500 | - |
+| alias | 配置`value`和`text`的别名，用法同`Picker`组件 | Object | - | {} | { value: 'id', text: 'name'} |
+
+### 事件
+
+| 事件名 | 说明 | 参数1 | 参数2 | 参数3 |
+| - | - | - | - | - |
+| select | 点击确认按钮触发此事件 | date: 当前选中日期，Date 类型 | selectedVal: 当前选中项每一列的值，Array 类型 | selectedText: 当前选中项每一列的文案，Array 类型 |
+| cancel | 点击取消按钮触发此事件 | - | - |
+| change | 滚轴滚动后触发此事件 | index: 当前滚动列次序，Number 类型 | selectedIndex: 当前列选中项的索引，Number 类型 |
+
+### 实例方法
+
+| 方法名 | 说明 |
+| - | - |
+| show | 显示选择器 |
+| hide | 隐藏选择器 |

example/App.vue

@@ -96,6 +96,10 @@
             path: '/segment-picker',
             text: 'SegmentPicker'
           },
+          {
+            path: '/date-picker',
+            text: 'DatePicker'
+          },
           {
             path: '/time-picker',
             text: 'TimePicker'

example/pages/date-picker.vue

+<template>
+  <cube-page type="picker-view" title="Date Picker" desc="">
+    <div slot="content">
+      <cube-button-group>
+        <cube-button @click="showDatePicker">Date Picker</cube-button>
+        <cube-button @click="showTimePicker">Time Picker</cube-button>
+        <cube-button @click="showDateTimePicker">Date Time Picker</cube-button>
+        <cube-button @click="showMonthDatePicker">Month Date Picker</cube-button>
+        <cube-button @click="showUpdatePropsPicker">Use $updateProps</cube-button>
+      </cube-button-group>
+    </div>
+  </cube-page>
+</template>
+
+<script>
+  import CubePage from 'example/components/cube-page.vue'
+  import CubeButtonGroup from 'example/components/cube-button-group.vue'
+
+  export default {
+    mounted() {
+      this.datePicker = this.$createDatePicker({
+        title: 'Date Picker',
+        min: new Date(2008, 7, 8),
+        max: new Date(2020, 9, 20),
+        value: new Date(),
+        onSelect: this.selectHandle,
+        onCancel: this.cancelHandle
+      })
+
+      this.timePicker = this.$createDatePicker({
+        title: 'Time Picker',
+        min: [8, 0, 0],
+        max: [20, 59, 59],
+        value: new Date(),
+        startColumn: 'hour',
+        onSelect: this.selectHandle,
+        onCancel: this.cancelHandle
+      })
+
+      this.dateTimePicker = this.$createDatePicker({
+        title: 'Date Time Picker',
+        min: new Date(2008, 7, 8, 8, 0, 0),
+        max: new Date(2020, 9, 20, 20, 59, 59),
+        value: new Date(),
+        columnCount: 6,
+        onSelect: this.selectHandle,
+        onCancel: this.cancelHandle
+      })
+
+      this.monthDatePicker = this.$createDatePicker({
+        title: 'Month Date Picker',
+        min: [1, 1],
+        max: [12, 31],
+        value: new Date(),
+        startColumn: 'month',
+        columnCount: 2,
+        onSelect: this.selectHandle,
+        onCancel: this.cancelHandle
+      })
+
+      this.updatePropsPicker = this.$createDatePicker({
+        title: 'Use $updateProps',
+        min: new Date(2008, 7, 8),
+        max: new Date(2020, 9, 20),
+        value: new Date(),
+        onSelect: this.selectHandle,
+        onCancel: this.cancelHandle
+      })
+    },
+    methods: {
+      showDatePicker() {
+        this.datePicker.show()
+      },
+      showTimePicker() {
+        this.timePicker.show()
+      },
+      showDateTimePicker() {
+        this.dateTimePicker.show()
+      },
+      showMonthDatePicker() {
+        this.monthDatePicker.show()
+      },
+      showUpdatePropsPicker() {
+        this.updatePropsPicker.show()
+        setTimeout(() => {
+          this.updatePropsPicker.$updateProps({
+            title: 'updated',
+            value: new Date(2010, 9, 1)
+          })
+        }, 1000)
+      },
+      selectHandle(date, selectedVal, selectedText) {
+        this.$createDialog({
+          type: 'warn',
+          content: `Selected Item: <br/> - date: ${date} <br/> - value: ${selectedVal.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
+          icon: 'cubeic-alert'
+        }).show()
+      },
+      cancelHandle() {
+        this.$createToast({
+          type: 'correct',
+          txt: 'Picker canceled',
+          time: 1000
+        }).show()
+      }
+    },
+    components: {
+      CubePage,
+      CubeButtonGroup
+    }
+  }
+</script>

example/router/routes.js

@@ -16,6 +16,7 @@ import FormCustom from '../pages/form/custom.vue'
 import Picker from '../pages/picker.vue'
 import CascadePicker from '../pages/cascade-picker.vue'
 import SegmentPicker from '../pages/segment-picker.vue'
+import DatePicker from '../pages/date-picker.vue'
 import TimePicker from '../pages/time-picker.vue'
 import Select from '../pages/select.vue'
 import Dialog from '../pages/dialog.vue'
@@ -106,6 +107,10 @@ const routes = [
     path: '/segment-picker',
     component: SegmentPicker
   },
+  {
+    path: '/date-picker',
+    component: DatePicker
+  },
   {
     path: '/time-picker',
     component: TimePicker

src/common/mixins/basic-picker.js

+const DEFAULT_KEYS = {
+  value: 'value',
+  text: 'text'
+}
+
+export default {
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    selectedIndex: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    alias: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  computed: {
+    valueKey() {
+      return this.alias.value || DEFAULT_KEYS.value
+    },
+    textKey() {
+      return this.alias.text || DEFAULT_KEYS.text
+    }
+  },
+  watch: {
+    data(newVal) {
+      this.setData(newVal, this.selectedIndex)
+    },
+    selectedIndex(newVal) {
+      this.setData(this.data, newVal)
+    }
+  }
+}

src/common/mixins/picker.js

-const DEFAULT_KEYS = {
-  value: 'value',
-  text: 'text'
-}
-
 export default {
   props: {
-    data: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-    selectedIndex: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
     title: {
       type: String
     },
@@ -32,30 +15,8 @@ export default {
       type: Number,
       default: 2500
     },
-    alias: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
     zIndex: {
       type: Number
     }
-  },
-  computed: {
-    valueKey() {
-      return this.alias.value || DEFAULT_KEYS.value
-    },
-    textKey() {
-      return this.alias.text || DEFAULT_KEYS.text
-    }
-  },
-  watch: {
-    data(newVal) {
-      this.setData(newVal, this.selectedIndex)
-    },
-    selectedIndex(newVal) {
-      this.setData(this.data, newVal)
-    }
   }
 }

src/components/cascade-picker/cascade-picker.vue

 <template>
   <cube-picker
       ref="picker"
-      :title="title"
       :data="pickerData"
       :selected-index="pickerSelectedIndex"
+      :title="title"
       :z-index="zIndex"
       :cancel-txt="cancelTxt"
       :confirm-txt="confirmTxt"
@@ -16,6 +16,7 @@
 <script type="text/ecmascript-6">
   import CubePicker from '../picker/picker.vue'
   import apiMixin from '../../common/mixins/api'
+  import basicPickerMixin from '../../common/mixins/basic-picker'
   import pickerMixin from '../../common/mixins/picker'
 
   const COMPONENT_NAME = 'cube-cascade-picker'
@@ -25,7 +26,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin, pickerMixin],
+    mixins: [apiMixin, basicPickerMixin, pickerMixin],
     data () {
       return {
         cascadeData: this.data.slice(),
@@ -84,6 +85,10 @@
           i++
         }
 
+        if (i < this.pickerData.length) {
+          this.pickerData.splice(i, this.pickerData.length - i)
+        }
+
         this.pickerData = this.pickerData.slice()
       }
     },

src/components/date-picker/date-picker.vue

+<template>
+  <cube-cascade-picker
+    ref="cascadePicker"
+    :data="data"
+    :selectedIndex="selectedIndex"
+    :title="title"
+    :cancel-txt="cancelTxt"
+    :confirm-txt="confirmTxt"
+    :swipe-time="swipeTime"
+    :z-index="zIndex"
+    @select="_select"
+    @cancel="_cancel"
+    @change="_change">
+  </cube-cascade-picker>
+</template>
+
+<script>
+  import apiMixin from '../../common/mixins/api'
+  import pickerMixin from '../../common/mixins/picker'
+
+  const COMPONENT_NAME = 'date-picker'
+  const EVENT_SELECT = 'select'
+  const EVENT_CANCEL = 'cancel'
+  const EVENT_CHANGE = 'change'
+
+  const UNIT_LIST = ['year', 'month', 'date', 'hour', 'minute', 'second']
+  const UNIT_RELATED_LIST = [
+    {
+      txt: '年',
+      pad: false
+    },
+    {
+      txt: '月',
+      natureMin: 1,
+      natureMax: 12,
+      pad: false
+    },
+    {
+      txt: '日',
+      natureMin: 1,
+      natureMax: 31,
+      pad: false
+    },
+    {
+      txt: '时',
+      natureMin: 0,
+      natureMax: 23,
+      pad: false,
+      natureRange: range(0, 23, false, '时')
+    },
+    {
+      txt: '分',
+      natureMin: 0,
+      natureMax: 59,
+      pad: true,
+      natureRange: range(0, 59, true, '分')
+    },
+    {
+      txt: '秒',
+      natureMin: 0,
+      natureMax: 59,
+      pad: true,
+      natureRange: range(0, 59, true, '秒')
+    }
+  ]
+
+  export default {
+    name: COMPONENT_NAME,
+    mixins: [apiMixin, pickerMixin],
+    props: {
+      min: {
+        type: [Date, Array],
+        default() {
+          return new Date(2010, 1, 1)
+        }
+      },
+      max: {
+        type: [Date, Array],
+        default() {
+          return new Date(2020, 12, 31)
+        }
+      },
+      startColumn: {
+        type: String,
+        default() {
+          return 'year'
+        }
+      },
+      columnCount: {
+        type: Number,
+        default: 3
+      },
+      value: {
+        type: [Date, Array],
+        default() {
+          return this.min
+        }
+      }
+    },
+    computed: {
+      startIndex() {
+        let startIndex = UNIT_LIST.indexOf(this.startColumn)
+        return startIndex < 0 ? 0 : startIndex
+      },
+      minArray() {
+        return this.min instanceof Date
+                ? dateToArray(this.min).slice(this.startIndex, this.startIndex + this.columnCount)
+                : this.min
+      },
+      maxArray() {
+        return this.max instanceof Date
+                ? dateToArray(this.max).slice(this.startIndex, this.startIndex + this.columnCount)
+                : this.max
+      },
+      valueArray() {
+        return this.value instanceof Date
+                ? dateToArray(this.value).slice(this.startIndex, this.startIndex + this.columnCount)
+                : this.value
+      },
+      data() {
+        let data = []
+        this._generateData(this.startIndex, 0, data)
+
+        return data
+      },
+      selectedIndex() {
+        let selectedIndex = []
+        let data = this.data
+        let findIndex
+
+        for (let i = 0; i < this.columnCount && i < 6 - this.startIndex; i++) {
+          findIndex = data.findIndex((item) => {
+            return this.valueArray[i] && item.value === this.valueArray[i]
+          })
+          selectedIndex[i] = findIndex !== -1 ? findIndex : 0
+          data = data[selectedIndex[i]].children
+        }
+
+        return selectedIndex
+      }
+    },
+    methods: {
+      show() {
+        this.$refs.cascadePicker.show()
+      },
+      hide() {
+        this.$refs.cascadePicker.hide()
+      },
+      _select(selectedVal, selectedIndex, selectedText) {
+        this.$emit(EVENT_SELECT, this._arrayToDate(selectedVal), selectedVal, selectedText)
+      },
+      _cancel() {
+        this.$emit(EVENT_CANCEL)
+      },
+      _change(i, newIndex) {
+        this.$emit(EVENT_CHANGE, i, newIndex)
+      },
+      _generateData(i, count, item) {
+        if (count === 0) {
+          let min = i === 0 ? this.minArray[0] : Math.max(this.minArray[0], UNIT_RELATED_LIST[i].natureMin)
+          let max = i === 0 ? this.maxArray[0] : Math.min(this.maxArray[0], UNIT_RELATED_LIST[i].natureMax)
+          item.push(...range(min, max, UNIT_RELATED_LIST[i].pad, UNIT_RELATED_LIST[i].txt, true, true))
+        } else {
+          if (i < 3 || item.isMin || item.isMax) {
+            let natureMax = i === 2 ? computeNatrueMaxDay(item.value, item.year) : UNIT_RELATED_LIST[i].natureMax
+            let min = item.isMin ? Math.max(this.minArray[count], UNIT_RELATED_LIST[i].natureMin) : UNIT_RELATED_LIST[i].natureMin
+            let max = item.isMax ? Math.min(this.maxArray[count], natureMax) : natureMax
+
+            let storageYear = i === 1 && this.startIndex === 0 && this.columnCount >= 3 && item.value
+            item.children = range(min, max, UNIT_RELATED_LIST[i].pad, UNIT_RELATED_LIST[i].txt, item.isMin, item.isMax, storageYear)
+          } else {
+            item.children = UNIT_RELATED_LIST[i].natureRange
+          }
+        }
+        if (count < this.columnCount - 1 && i < 5) {
+          (item.children || item).forEach(subItem => {
+            this._generateData(i + 1, count + 1, subItem)
+          })
+        }
+      },
+      _arrayToDate(selectedVal) {
+        const args = []
+        const defaultDateArray = dateToArray(new Date(0))
+
+        for (let i = 0; i < 6; i++) {
+          if (i < this.startIndex) {
+            args[i] = defaultDateArray[i]
+          } else if (i >= this.startIndex + this.columnCount) {
+            args[i] = UNIT_RELATED_LIST[i].natureMin
+          } else {
+            args[i] = selectedVal[i - this.startIndex]
+          }
+        }
+        // Month need to subtract 1.
+        args[1]--
+
+        return new Date(...args)
+      }
+    }
+  }
+
+  function range(min, max, pad = false, unit = '', fatherIsMin, fatherIsMax, year) {
+    let arr = []
+    for (let i = min; i <= max; i++) {
+      const value = (pad && i < 10 ? '0' + i : i) + unit
+      const object = {
+        text: value,
+        value: i
+      }
+
+      if (fatherIsMin && i === min) object.isMin = true
+      if (fatherIsMax && i === max) object.isMax = true
+      if (year) object.year = year
+
+      arr.push(object)
+    }
+    return arr
+  }
+
+  function computeNatrueMaxDay(month, year) {
+    let natureMaxDay = 30
+    if ([1, 3, 5, 7, 8, 10, 12].indexOf(month) > -1) {
+      natureMaxDay = 31
+    } else {
+      if (month === 2) {
+        natureMaxDay = !year || (!(year % 400) || (!(year % 4) && year % 100)) ? 29 : 28
+      }
+    }
+
+    return natureMaxDay
+  }
+
+  function dateToArray(date) {
+    return [date.getFullYear(), date.getMonth() + 1, date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()]
+  }
+</script>

src/components/picker/picker.vue

 <template>
   <transition name="cube-picker-fade">
     <cube-popup
-        type="picker"
-        :mask="true"
-        :center="false"
-        :z-index="zIndex"
-        v-show="isVisible"
-        @touchmove.prevent
-        @mask-click="cancel">
+      type="picker"
+      :mask="true"
+      :center="false"
+      :z-index="zIndex"
+      v-show="isVisible"
+      @touchmove.prevent
+      @mask-click="cancel">
       <transition name="cube-picker-move">
         <div class="cube-picker-panel cube-safe-area-pb" v-show="isVisible" @click.stop>
           <div class="cube-picker-choose border-bottom-1px">
@@ -37,6 +37,7 @@
   import BScroll from 'better-scroll'
   import CubePopup from '../popup/popup.vue'
   import apiMixin from '../../common/mixins/api'
+  import basicPickerMixin from '../../common/mixins/basic-picker'
   import pickerMixin from '../../common/mixins/picker'
 
   const COMPONENT_NAME = 'cube-picker'
@@ -48,7 +49,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [apiMixin, pickerMixin],
+    mixins: [apiMixin, basicPickerMixin, pickerMixin],
     data() {
       return {
         pickerData: this.data.slice(),

src/index.js

@@ -5,6 +5,7 @@ import {
   Popup,
   TimePicker,
   SegmentPicker,
+  DatePicker,
   Select,
   Dialog,
   Tip,
@@ -36,6 +37,7 @@ function install(Vue) {
     Button,
     TimePicker,
     SegmentPicker,
+    DatePicker,
     Select,
     Dialog,
     Tip,

src/module.js

@@ -20,6 +20,7 @@ import Slide from './modules/slide'
 import IndexList from './modules/index-list'
 import TimePicker from './modules/time-picker'
 import SegmentPicker from './modules/segment-picker'
+import DatePicker from './modules/date-picker'
 import Scroll from './modules/scroll'
 
 import Upload from './modules/upload'
@@ -47,6 +48,7 @@ export {
   TimePicker,
   CascadePicker,
   SegmentPicker,
+  DatePicker,
   Select,
   Form,
   FormGroup,

src/modules/date-picker/api.js

+import createAPI from '../../common/helpers/create-api'
+import { warn } from '../../common/helpers/debug'
+
+export default function addDatePicker (Vue, DatePicker) {
+  const datePickerAPI = createAPI(Vue, DatePicker, ['select', 'cancel', 'value-change'])
+  datePickerAPI.before((data, renderFn, single) => {
+    if (single) {
+      warn('DatePicker component can not be a singleton.')
+    }
+  })
+}

src/modules/date-picker/index.js

+import CascadePicker from '../../components/cascade-picker/cascade-picker.vue'
+import DatePicker from '../../components/date-picker/date-picker.vue'
+import addDatePicker from './api'
+import addCascadePicker from '../cascade-picker/api'
+
+DatePicker.install = function (Vue) {
+  Vue.component(CascadePicker.name, CascadePicker)
+  Vue.component(DatePicker.name, DatePicker)
+  addCascadePicker(Vue, CascadePicker)
+  addDatePicker(Vue, DatePicker)
+}
+
+DatePicker.CascadePicker = CascadePicker
+
+export default DatePicker

test/unit/specs/date-picker.spec.js

+import Vue from 'vue2'
+import DatePicker from '@/modules/date-picker'
+import instantiateComponent from '@/common/helpers/instantiate-component'
+import { dispatchSwipe } from '../utils/event'
+
+describe('DatePicker', () => {
+  let vm
+
+  afterEach(() => {
+    if (vm) {
+      vm.$parent.destroy()
+      vm = null
+    }
+  })
+
+  it('use', () => {
+    Vue.use(DatePicker)
+    expect(Vue.component(DatePicker.name))
+      .to.be.a('function')
+  })
+
+  it('should render correct contents', function () {
+    vm = createDatePicker({
+      min: new Date(2008, 7, 8),
+      max: new Date(2020, 9, 20)
+    })
+
+    const wheels = vm.$el.querySelectorAll('.cube-picker-wheel-wrapper > div')
+    expect(wheels.length)
+      .to.equal(3)
+
+    const firstWheelItems = wheels[0].querySelectorAll('li')
+    expect(firstWheelItems.length)
+      .to.equal(13)
+    expect(firstWheelItems[1].textContent.trim())
+      .to.equal('2009年')
+
+    const secondWheelItems = wheels[1].querySelectorAll('li')
+    expect(secondWheelItems.length)
+      .to.equal(5)
+    expect(secondWheelItems[1].textContent.trim())
+      .to.equal('9月')
+
+    const thirdWheelItems = wheels[2].querySelectorAll('li')
+    expect(thirdWheelItems.length)
+      .to.equal(24)
+    expect(thirdWheelItems[1].textContent.trim())
+      .to.equal('9日')
+  })
+
+  it('should correct when configured startColumn and columnCount', function (done) {
+    this.timeout(10000)
+
+    vm = createDatePicker({
+      min: [1, 8],
+      max: [31, 23],
+      startColumn: 'date',
+      columnCount: 2
+    })
+
+    const wheels = vm.$el.querySelectorAll('.cube-picker-wheel-wrapper > div')
+    expect(wheels.length)
+      .to.equal(2)
+
+    const firstWheelItems = wheels[0].querySelectorAll('li')
+    expect(firstWheelItems.length)
+      .to.equal(31)
+    expect(firstWheelItems[1].textContent.trim())
+      .to.equal('2日')
+
+    const secondWheelItems = wheels[1].querySelectorAll('li')
+    expect(secondWheelItems.length)
+      .to.equal(16)
+    expect(secondWheelItems[1].textContent.trim())
+      .to.equal('9时')
+
+    // test: _arrayToDate if (i < this.beginIndex)
+    vm.show()
+    setTimeout(() => {
+      const confirmBtn = vm.$el.querySelector('.cube-picker-choose [data-action="confirm"]')
+      confirmBtn.click()
+      done()
+    }, 50)
+  })
+
+  it('should trigger events', function (done) {
+    this.timeout(10000)
+
+    const selectHandle = sinon.spy()
+    const cancelHandle = sinon.spy()
+    const changeHandle = sinon.spy()
+
+    vm = createDatePicker({
+      min: new Date(2008, 7, 8),
+      max: new Date(2020, 9, 20),
+      value: new Date(2010, 9, 1)
+    }, {
+      select: selectHandle,
+      cancel: cancelHandle,
+      change: changeHandle
+    })
+
+    vm.show()
+    setTimeout(() => {
+      const wheels = vm.$el.querySelectorAll('.cube-picker-wheel-wrapper > div')
+      const firstWheelItems = wheels[0].querySelectorAll('li')
+
+      // change
+      dispatchSwipe(firstWheelItems[1], [
+        {
+          pageX: firstWheelItems[1].offsetLeft + 10,
+          pageY: firstWheelItems[1].offsetTop + 10
+        },
+        {
+          pageX: 300,
+          pageY: 380
+        }
+      ], 100)
+
+      setTimeout(() => {
+        expect(changeHandle)
+          .to.be.callCount(1)
+
+        // select
+        const confirmBtn = vm.$el.querySelector('.cube-picker-choose [data-action="confirm"]')
+        confirmBtn.click()
+        expect(selectHandle)
+          .to.be.callCount(1)
+
+        // cancel
+        vm.show()
+        const cancelBtn = vm.$el.querySelector('.cube-picker-choose [data-action="cancel"]')
+        cancelBtn.click()
+        expect(cancelHandle)
+          .to.be.callCount(1)
+
+        done()
+      }, 1000)
+    }, 150)
+  })
+
+  it('should call methods', function (done) {
+    this.timeout(10000)
+
+    vm = createDatePicker()
+
+    // show
+    vm.show()
+
+    // hide
+    setTimeout(() => {
+      vm.hide()
+
+      done()
+    }, 100)
+  })
+
+  it('$updateProps', function (done) {
+    const selectHandle = sinon.spy()
+
+    vm = createDatePicker({
+      min: new Date(2008, 7, 8),
+      max: new Date(2020, 9, 20)
+    }, {
+      select: selectHandle
+    })
+
+    vm.$updateProps({
+      value: new Date(2010, 9, 1)
+    })
+
+    vm.show()
+    setTimeout(() => {
+      const confirmBtn = vm.$el.querySelector('.cube-picker-choose [data-action="confirm"]')
+      confirmBtn.click()
+      expect(selectHandle)
+        .to.be.calledWith(new Date(2010, 9, 1), [2010, 10, 1], ['2010年', '10月', '1日'])
+
+      done()
+    }, 100)
+  })
+
+  it('should add warn log when single is true', () => {
+    const app = new Vue()
+    const originWarn = console.warn
+    const msgs = []
+    console.warn = function (...args) {
+      msgs.push(args.join('#'))
+    }
+    vm = app.$createDatePicker({}, true)
+    expect(msgs.length)
+      .to.equal(1)
+    console.warn = originWarn
+  })
+
+  function createDatePicker(props = {}, events = {}) {
+    return instantiateComponent(Vue, DatePicker, {
+      props: props,
+      on: events
+    })
+  }
+})