feat(date-picker): support display order

* feat(date-picker): add columnOrder prop

add columnOrder prop which can be used to change the display order in case where the order is not
'Year-Month-Day Hour-Minute-Second'

* docs(date-picker): add version for columnOrder

* docs(date-picker): fix the mistake in document of date-picker

change "Day" to "Date" in the expression of columnOrder prop

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

@@ -231,6 +231,34 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
   }
   ```
 
+- `columnOrder`
+
+   `columnOrder` can be used to change the display order in case where the order is not 'Year-Month-Date Hour-Minute-Second'. For example, we can set the `columnOrder` to `['month', 'date', 'year']` for the display order of 'Month-Date-Year'.
+
+	```html
+	<cube-button @click="showChangeOrderPicker">Date Picker(Change order)</cube-button>
+	```
+	```js
+	export default {
+	  methods: {
+	    showChangeOrderPicker() {
+         if (!this.changeOrderPicker) {
+           this.changeOrderPicker = this.$createDatePicker({
+             title: 'Date Picker',
+             min: new Date(2008, 7, 8),
+             max: new Date(2020, 9, 20),
+             value: new Date(),
+             columnOrder: ['month', 'date', 'year'],
+             onSelect: this.selectHandle,
+             onCancel: this.cancelHandle
+           })
+         }
+         this.changeOrderPicker.show()
+       }
+	  }
+	}
+	```
+
 ### Props configuration
 
 | Attribute | Description | Type | Accepted Values | Default | Example |
@@ -249,6 +277,7 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 | visible<sup>1.8.1</sup> | whether visible. Bind to `v-model` | Boolean | true/false | false | - |
 | maskClosable<sup>1.9.6</sup> | whether hide the component when clicked the mask layer | Boolean | true/false | true | - |
 | zIndex<sup>1.9.6</sup> | the value of the style z-index | Number | - | 100 | - |
+| columnOrder<sup>1.12.14</sup> | display order | Array | - | ['year', 'month', 'date', 'hour', 'minute', 'second'] | - |
 
 * `format` sub configuration
 

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

@@ -231,6 +231,34 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
   }
   ```
 
+- `columnOrder`
+
+   针对日期展示格式顺序不是 "年-月-日 小时-分钟-秒" 的场景，可以通过 `columnOrder` 来修改展示顺序。例如日期展示顺序为 “月-日-年”，可配置 `columnOrder` 值为 `['month', 'date', 'year']`
+
+	```html
+	<cube-button @click="showChangeOrderPicker">Date Picker(Change order)</cube-button>
+	```
+	```js
+	export default {
+	  methods: {
+	    showChangeOrderPicker() {
+         if (!this.changeOrderPicker) {
+           this.changeOrderPicker = this.$createDatePicker({
+             title: 'Date Picker',
+             min: new Date(2008, 7, 8),
+             max: new Date(2020, 9, 20),
+             value: new Date(),
+             columnOrder: ['month', 'date', 'year'],
+             onSelect: this.selectHandle,
+             onCancel: this.cancelHandle
+           })
+         }
+         this.changeOrderPicker.show()
+       }
+	  }
+	}
+	```
+
 ### Props 配置
 
 | 参数 | 说明 | 类型 | 可选值 | 默认值 | 示例 |
@@ -249,6 +277,7 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | visible<sup>1.8.1</sup> | 显示状态，是否可见。`v-model`绑定值 | Boolean | true/false | false | - |
 | maskClosable<sup>1.9.6</sup> | 点击蒙层是否隐藏 | Boolean | true/false | true | - |
 | zIndex<sup>1.9.6</sup> | 样式 z-index 的值 | Number | - | 100 | - |
+| columnOrder<sup>1.12.14</sup> | 列的展示顺序 | Array | - | ['year', 'month', 'date', 'hour', 'minute', 'second'] | - |
 
 * `format` 子配置项
 

example/pages/date-picker.vue

@@ -3,6 +3,7 @@
     <div slot="content">
       <cube-button-group>
         <cube-button @click="showDatePicker">Date Picker</cube-button>
+        <cube-button @click="showChangeOrderPicker">Date Picker(Change order)</cube-button>
         <cube-button @click="showTimePicker">Time Picker</cube-button>
         <cube-button @click="showDateTimePicker">Date Time Picker</cube-button>
         <cube-button @click="showFormatPicker">Use format</cube-button>
@@ -104,6 +105,21 @@
           })
         }, 1000)
       },
+      showChangeOrderPicker() {
+        if (!this.changeOrderPicker) {
+          this.changeOrderPicker = this.$createDatePicker({
+            title: 'Date Picker',
+            min: new Date(2008, 7, 8),
+            max: new Date(2020, 9, 20),
+            value: new Date(),
+            columnOrder: ['date', 'month', 'year'],
+            onSelect: this.selectHandle,
+            onCancel: this.cancelHandle
+          })
+        }
+
+        this.changeOrderPicker.show()
+      },
       selectHandle(date, selectedVal, selectedText) {
         this.$createDialog({
           type: 'warn',

src/common/mixins/basic-picker.js

 const DEFAULT_KEYS = {
   value: 'value',
-  text: 'text'
+  text: 'text',
+  order: 'order'
 }
 
 export default {
@@ -31,6 +32,9 @@ export default {
     textKey() {
       return this.alias.text || DEFAULT_KEYS.text
     },
+    orderKey() {
+      return DEFAULT_KEYS.order
+    },
     merge() {
       return [this.data, this.selectedIndex]
     }

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

@@ -82,7 +82,8 @@
             data.forEach((item) => {
               columnData.push({
                 value: item[this.valueKey],
-                text: item[this.textKey]
+                text: item[this.textKey],
+                order: item[this.orderKey]
               })
             })
             this.pickerData[i] = columnData

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

@@ -99,6 +99,12 @@
         default() {
           return this.min
         }
+      },
+      columnOrder: {
+        type: Array,
+        default() {
+          return ['year', 'month', 'date', 'hour', 'minute', 'second']
+        }
       }
     },
     computed: {
@@ -225,7 +231,8 @@
         for (let i = min; i <= max; i++) {
           const object = {
             text: formatType(type, format, i, 'i'),
-            value: i
+            value: i,
+            order: this.columnOrder.indexOf(type)
           }
 
           if (fatherIsMin && i === min) object.isMin = true

src/components/picker/picker.vue

@@ -24,7 +24,7 @@
             <i class="border-bottom-1px"></i>
             <i class="border-top-1px"></i>
             <div class="cube-picker-wheel-wrapper" ref="wheelWrapper">
-              <div v-for="(data,index) in finalData" :key="index">
+              <div v-for="(data,index) in finalData" :key="index" :style="{ order: _getFlexOrder(data)}">
                 <!-- The class name of the ul and li need be configured to BetterScroll. -->
                 <ul class="cube-picker-wheel-scroll">
                   <li v-for="(item,index) in data" class="cube-picker-wheel-item" :key="index" v-html="item[textKey]">
@@ -255,6 +255,12 @@
         return !this.pending && this.wheels.every((wheel) => {
           return !wheel.isInTransition
         })
+      },
+      _getFlexOrder(data) {
+        if (data[0]) {
+          return data[0][this.orderKey]
+        }
+        return 0
       }
     },
     beforeDestroy() {

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

@@ -117,6 +117,19 @@ describe('DatePicker', () => {
       .to.equal('第 9 日')
   })
 
+  it('should render correct contents when configured columnOrder', function () {
+    vm = createDatePicker({
+      min: new Date(2008, 7, 8),
+      max: new Date(2020, 9, 20),
+      columnOrder: ['month', 'date', 'year']
+    })
+
+    const wheels = vm.$el.querySelectorAll('.cube-picker-wheel-wrapper > div')
+    expect(wheels[0].style.webkitOrder || wheels[0].style.order).to.equal('2')
+    expect(wheels[1].style.webkitOrder || wheels[1].style.order).to.equal('0')
+    expect(wheels[2].style.webkitOrder || wheels[2].style.order).to.equal('1')
+  })
+
   it('should trigger events', function (done) {
     this.timeout(10000)