feat(DatePicker): support columns-order (#6672) (#6768)

src/datetime-picker/DatePicker.js

@@ -83,20 +83,28 @@ export default createComponent({
         },
       ];
 
-      if (this.type === 'date') {
+      switch (this.type) {
+        case 'date':
           result = result.slice(0, 3);
-      }
+          break;
-
+        case 'year-month':
-      if (this.type === 'year-month') {
           result = result.slice(0, 2);
-      }
+          break;
-
+        case 'month-day':
-      if (this.type === 'month-day') {
           result = result.slice(1, 3);
+          break;
+        case 'datehour':
+          result = result.slice(0, 4);
+          break;
       }
 
-      if (this.type === 'datehour') {
+      if (this.columnsOrder) {
-        result = result.slice(0, 4);
+        const columnsOrder = this.columnsOrder.concat(
+          result.map((column) => column.type)
+        );
+        result.sort(
+          (a, b) => columnsOrder.indexOf(a.type) - columnsOrder.indexOf(b.type)
+        );
       }
 
       return result;
@@ -155,7 +163,13 @@ export default createComponent({
     updateInnerValue() {
       const { type } = this;
       const indexes = this.getPicker().getIndexes();
-      const getValue = (index) => {
+      const getValue = (type) => {
+        let index = 0;
+        this.originColumns.forEach((column, columnIndex) => {
+          if (type === column.type) {
+            index = columnIndex;
+          }
+        });
         const { values } = this.originColumns[index];
         return getTrueValue(values[indexes[index]]);
       };
@@ -163,15 +177,14 @@ export default createComponent({
       let year;
       let month;
       let day;
-
       if (type === 'month-day') {
         year = this.innerValue.getFullYear();
-        month = getValue(0);
+        month = getValue('month');
-        day = getValue(1);
+        day = getValue('day');
       } else {
-        year = getValue(0);
+        year = getValue('year');
-        month = getValue(1);
+        month = getValue('month');
-        day = type === 'year-month' ? 1 : getValue(2);
+        day = type === 'year-month' ? 1 : getValue('day');
       }
 
       const maxDay = getMonthEndDay(year, month);
@@ -181,12 +194,12 @@ export default createComponent({
       let minute = 0;
 
       if (type === 'datehour') {
-        hour = getValue(3);
+        hour = getValue('hour');
       }
 
       if (type === 'datetime') {
-        hour = getValue(3);
+        hour = getValue('hour');
-        minute = getValue(4);
+        minute = getValue('minute');
       }
 
       const value = new Date(year, month - 1, day, hour, minute);
@@ -208,32 +221,23 @@ export default createComponent({
       const value = this.innerValue;
       const { formatter } = this;
 
-      let values = [
+      const values = this.originColumns.map((column) => {
-        formatter('year', `${value.getFullYear()}`),
+        switch (column.type) {
-        formatter('month', padZero(value.getMonth() + 1)),
+          case 'year':
-        formatter('day', padZero(value.getDate())),
+            return formatter('year', `${value.getFullYear()}`);
-      ];
+          case 'month':
-
+            return formatter('month', padZero(value.getMonth() + 1));
-      if (this.type === 'datetime') {
+          case 'day':
-        values.push(
+            return formatter('day', padZero(value.getDate()));
-          formatter('hour', padZero(value.getHours())),
+          case 'hour':
-          formatter('minute', padZero(value.getMinutes()))
+            return formatter('hour', padZero(value.getHours()));
-        );
+          case 'minute':
-      }
+            return formatter('minute', padZero(value.getMinutes()));
-
+          default:
-      if (this.type === 'datehour') {
+            // no default
-        values.push(
+            return null;
-          formatter('hour', padZero(value.getHours()))
-        );
-      }
-
-      if (this.type === 'year-month') {
-        values = values.slice(0, 2);
-      }
-
-      if (this.type === 'month-day') {
-        values = values.slice(1, 3);
         }
+      });
 
       this.$nextTick(() => {
         this.getPicker().setValues(values);

src/datetime-picker/README.md

@@ -208,6 +208,42 @@ export default {
 };
 ```
 
+### Columns Order
+
+```html
+<van-datetime-picker
+  v-model="currentDate"
+  type="date"
+  title="自定义列排序"
+  :columns-order="['month', 'day', 'year']"
+  :formatter="formatter"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      currentDate: new Date(),
+    };
+  },
+  methods: {
+    formatter(type, val) {
+      if (type === 'year') {
+        return val + ' Year';
+      }
+      if (type === 'month') {
+        return val + ' Month';
+      }
+      if (type === 'day') {
+        return val + ' Day';
+      }
+      return val;
+    },
+  },
+};
+```
+
 ## API
 
 ### Props
@@ -222,6 +258,7 @@ export default {
 | loading | Whether to show loading prompt | _boolean_ | `false` |
 | filter | Option filter | _(type, vals) => vals_ | - |
 | formatter | Option text formatter | _(type, val) => val_ | - |
+| columns-order `v2.9.2` | Array for ordering columns, where item can be set to<br> `year`, `month`, `day`, `hour` and `minute` | _string[]_ | - |
 | item-height `v2.8.6` | Option height, supports `px` ans `rem` unit, default `px` | _number \| string_ | `44` |
 | visible-item-count | Count of visible columns | _number \| string_ | `5` |
 | swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |

src/datetime-picker/README.zh-CN.md

@@ -217,6 +217,42 @@ export default {
 };
 ```
 
+### 自定义列排序
+
+```html
+<van-datetime-picker
+  v-model="currentDate"
+  type="date"
+  title="自定义列排序"
+  :columns-order="['month', 'day', 'year']"
+  :formatter="formatter"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      currentDate: new Date(),
+    };
+  },
+  methods: {
+    formatter(type, val) {
+      if (type === 'year') {
+        return val + '年';
+      }
+      if (type === 'month') {
+        return val + '月';
+      }
+      if (type === 'day') {
+        return val + '日';
+      }
+      return val;
+    },
+  },
+};
+```
+
 ## API
 
 ### Props
@@ -231,6 +267,7 @@ export default {
 | loading | 是否显示加载状态 | _boolean_ | `false` |
 | filter | 选项过滤函数 | _(type, vals) => vals_ | - |
 | formatter | 选项格式化函数 | _(type, val) => val_ | - |
+| columns-order `v2.9.2` | 自定义列排序数组, 子项可选值为<br> `year`、`month`、`day`、`hour`、`minute` | _string[]_ | - |
 | item-height `v2.8.6` | 选项高度，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `44` |
 | visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
 | swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |

src/datetime-picker/demo/index.vue

@@ -70,6 +70,18 @@
         :filter="filter"
       />
     </demo-block>
+
+    <demo-block :title="t('sortColumns')">
+      <van-datetime-picker
+        v-model="value.sortColumnsDate"
+        type="date"
+        :title="t('sortColumns')"
+        :columns-order="['month', 'day', 'year']"
+        :min-date="minDate"
+        :max-date="maxDate"
+        :formatter="formatter"
+      />
+    </demo-block>
   </demo-section>
 </template>
 
@@ -87,9 +99,10 @@ export default {
       monthDayType: '选择月日',
       yearMonthType: '选择年月',
       optionFilter: '选项过滤器',
+      sortColumns: '自定义列排序',
     },
     'en-US': {
-      day: 'Day',
+      day: ' Day',
       year: ' Year',
       month: ' Month',
       timeType: 'Choose Time',
@@ -99,6 +112,7 @@ export default {
       monthDayType: 'Choose Month-Day',
       yearMonthType: 'Choose Year-Month',
       optionFilter: 'Option Filter',
+      sortColumns: 'Columns Order',
     },
   },
 
@@ -114,6 +128,7 @@ export default {
         monthDay: new Date(2020, 0, 1),
         yearMonth: new Date(2020, 0, 1),
         optionFilter: '12:00',
+        sortColumnsDate: new Date(2020, 0, 1),
       },
     };
   },

src/datetime-picker/shared.js

@@ -15,6 +15,7 @@ export const sharedProps = {
     type: Function,
     default: (type, value) => value,
   },
+  columnsOrder: Array,
 };
 
 export const TimePickerMixin = {

src/datetime-picker/test/__snapshots__/demo.spec.js.snap

@@ -1442,5 +1442,177 @@ exports[`renders demo correctly 1`] = `
       <!---->
     </div>
   </div>
+  <div>
+    <div class="van-picker van-datetime-picker">
+      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+        <div class="van-ellipsis van-picker__title">自定义列排序</div><button type="button" class="van-picker__confirm">确认</button>
+      </div>
+      <!---->
+      <div class="van-picker__columns" style="height: 220px;">
+        <div class="van-picker-column">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+              <div class="van-ellipsis">01月</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">02月</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">03月</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">04月</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">05月</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">06月</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">07月</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">08月</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">09月</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">10月</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">11月</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">12月</div>
+            </li>
+          </ul>
+        </div>
+        <div class="van-picker-column">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+              <div class="van-ellipsis">01日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">02日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">03日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">04日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">05日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">06日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">07日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">08日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">09日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">10日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">11日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">12日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">13日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">14日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">15日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">16日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">17日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">18日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">19日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">20日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">21日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">22日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">23日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">24日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">25日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">26日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">27日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">28日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">29日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">30日</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">31日</div>
+            </li>
+          </ul>
+        </div>
+        <div class="van-picker-column">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+              <div class="van-ellipsis">2020年</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">2021年</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">2022年</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">2023年</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">2024年</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">2025年</div>
+            </li>
+          </ul>
+        </div>
+        <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+      </div>
+      <!---->
+    </div>
+  </div>
 </div>
 `;