[new feature] DatetimePicker: add new prop formatter & add new extern…

…al classes fix #1526
youzan · Apr 23, 2019 · f0e38b2 · f0e38b2
1 parent b8683f6
commit f0e38b2
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 17 deletions.
diff --git a/example/pages/datetime-picker/index.js b/example/pages/datetime-picker/index.js
@@ -11,7 +11,15 @@ Page({
     currentDate2: null,
     currentDate3: new Date(2018, 0, 1),
     currentDate4: '12:00',
-    loading: false
+    loading: false,
+    formatter(type, value) {
+      if (type === 'year') {
+        return `${value}年`;
+      } else if (type === 'month') {
+        return `${value}月`;
+      }
+      return value;
+    }
   },
 
   onInput(event) {

diff --git a/example/pages/datetime-picker/index.wxml b/example/pages/datetime-picker/index.wxml
@@ -16,6 +16,7 @@
     value="{{ currentDate2 }}"
     min-date="{{ minDate }}"
     bind:input="onInput"
+    formatter="{{ formatter }}"
   />
 </demo-block>
 

diff --git a/packages/datetime-picker/README.md b/packages/datetime-picker/README.md
@@ -54,22 +54,31 @@ Page({
 
 #### 选择日期（年月日）
 
-`value` 为时间戳
+`value` 为时间戳，通过传入 `formatter` 函数对选项文字进行处理
 
 ```html
 <van-datetime-picker
   type="date"
   value="{{ currentDate }}"
-  min-date="{{ minDate }}"
   bind:input="onInput"
+  min-date="{{ minDate }}"
+  formatter="{{ formatter }}"
 />
 ```
 
 ```js
 Page({
   data: {
     currentDate: new Date().getTime(),
-    minDate: new Date().getTime()
+    minDate: new Date().getTime(),
+    formatter(type, value) {
+      if (type === 'year') {
+        return `${value}年`;
+      } else if (type === 'month') {
+        return `${value}月`;
+      }
+      return value;
+    }
   },
 
   onInput(event) {
@@ -150,6 +159,7 @@ Page({
 | max-hour | 可选的最大小时，针对 time 类型 | `Number` | `23` |
 | min-minute | 可选的最小分钟，针对 time 类型 | `Number` | `0` |
 | max-minute | 可选的最大分钟，针对 time 类型 | `Number` | `59` |
+| formatter | 选项格式化函数 | `(type, value) => value` | - |
 | title | 顶部栏标题 | `String` | `''` |
 | show-toolbar | 是否显示顶部栏 | `Boolean` | `false` |
 | loading | 是否显示加载状态 | `Boolean` | `false` |
@@ -179,3 +189,11 @@ Page({
 | setColumnValues(index, values) | 设置对应列中所有的备选值 |
 | getValues() | 获取所有列中被选中的值，返回一个数组 |
 | setValues(values) | `values`为一个数组，设置所有列中被选中的值 |
+
+### 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| active-class | 选中项样式类 |
+| toolbar-class | 顶部栏样式类 |
+| column-class | 列样式类 |
diff --git a/packages/datetime-picker/index.ts b/packages/datetime-picker/index.ts
@@ -38,9 +38,17 @@ function getMonthEndDay(year: number, month: number): number {
   return 32 - new Date(year, month - 1, 32).getDate();
 }
 
+const defaultFormatter = (_, value) => value;
+
 VantComponent({
+  classes: ['active-class', 'toolbar-class', 'column-class'],
+
   props: {
     ...pickerProps,
+    formatter: {
+      type: Function,
+      value: defaultFormatter
+    },
     value: null,
     type: {
       type: String,
@@ -102,7 +110,9 @@ VantComponent({
   methods: {
     getPicker() {
       if (this.picker == null) {
-        const picker = this.picker = this.selectComponent('.van-datetime-picker');
+        const picker = (this.picker = this.selectComponent(
+          '.van-datetime-picker'
+        ));
         const { setColumnValues } = picker;
         picker.setColumnValues = (...args: any) =>
           setColumnValues.apply(picker, [...args, false]);
@@ -111,11 +121,12 @@ VantComponent({
     },
 
     updateColumns() {
+      const { formatter = defaultFormatter } = this.data;
       const results = this.getRanges().map(({ type, range }, index) => {
         const values = times(range[1] - range[0] + 1, index => {
           let value = range[0] + index;
           value = type === 'year' ? `${value}` : padZero(value);
-          return value;
+          return formatter(type, value);
         });
 
         return { values };
@@ -292,23 +303,29 @@ VantComponent({
 
     updateColumnValue(value) {
       let values = [];
-      const { data } = this;
+      const { type, formatter = defaultFormatter } = this.data;
       const picker = this.getPicker();
 
-      if (data.type === 'time') {
+      if (type === 'time') {
         const pair = value.split(':');
-        values = [pair[0], pair[1]];
+        values = [
+          formatter('hour', pair[0]),
+          formatter('minute', pair[1])
+        ];
       } else {
         const date = new Date(value);
-        values = [`${date.getFullYear()}`, padZero(date.getMonth() + 1)];
-        if (data.type === 'date') {
-          values.push(padZero(date.getDate()));
+        values = [
+          formatter('year', `${date.getFullYear()}`),
+          formatter('month', padZero(date.getMonth() + 1))
+        ];
+        if (type === 'date') {
+          values.push(formatter('day', padZero(date.getDate())));
         }
-        if (data.type === 'datetime') {
+        if (type === 'datetime') {
           values.push(
-            padZero(date.getDate()),
-            padZero(date.getHours()),
-            padZero(date.getMinutes())
+            formatter('day', padZero(date.getDate())),
+            formatter('hour', padZero(date.getHours())),
+            formatter('minute', padZero(date.getMinutes()))
           );
         }
       }

diff --git a/packages/datetime-picker/index.wxml b/packages/datetime-picker/index.wxml
@@ -1,5 +1,8 @@
 <van-picker
   class="van-datetime-picker"
+  active-class="active-class"
+  toolbar-class="toolbar-class"
+  column-class="column-class"
   title="{{ title }}"
   columns="{{ columns }}"
   item-height="{{ itemHeight }}"

diff --git a/packages/picker-column/index.less b/packages/picker-column/index.less
@@ -3,11 +3,11 @@
 .van-picker-column {
   overflow: hidden;
   font-size: 16px;
+  color: @gray-dark;
   text-align: center;
 
   &__item {
     padding: 0 5px;
-    color: @gray-dark;
 
     &--selected {
       font-weight: 500;