Support DatePicker

* <add>(date-picker) * <add>(date-picker): example * <add>(date-picker): value * <update> value support Date type * <update> event * <add> test * <update> test * <update> expample * <add> column config * [update] column config * [fix] min max * [add] event param date * [fix] max date * [fix] memory * [add] support Array type * [fix] cascade column number reduce bug * [fix] value change * [update] example * [add] doc * [add] mixin: basic-picker + picker * [update] example * [add] test * [update] doc + remove value-change event * [update] variable name
rpdg · Mar 30, 2018 · df4c988 · df4c988
1 parent 2099065
commit df4c988
Show file tree

Hide file tree

Showing 17 changed files with 856 additions and 52 deletions.
diff --git a/document/common/config/menu.json b/document/common/config/menu.json
@@ -108,6 +108,7 @@
             "toast": "Toast",
             "picker": "Picker",
             "cascade-picker": "CascadePicker",
+            "date-picker": "DatePicker",
             "time-picker": "TimePicker",
             "dialog": "Dialog",
             "action-sheet": "ActionSheet"

diff --git a/document/components/docs/en-US/cascade-picker.md b/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
 

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

diff --git a/document/components/docs/zh-CN/date-picker.md b/document/components/docs/zh-CN/date-picker.md
@@ -0,0 +1,207 @@
+## 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 | 隐藏选择器 |
diff --git a/example/App.vue b/example/App.vue
@@ -96,6 +96,10 @@
             path: '/segment-picker',
             text: 'SegmentPicker'
           },
+          {
+            path: '/date-picker',
+            text: 'DatePicker'
+          },
           {
             path: '/time-picker',
             text: 'TimePicker'

diff --git a/example/pages/date-picker.vue b/example/pages/date-picker.vue
@@ -0,0 +1,112 @@
+<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>
diff --git a/example/router/routes.js b/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
-Original file line number
+Diff line change
@@ Expand Up / @@ -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
@@ Expand Down @@