feat(DatetimePicker): add filter prop (#1956)

example/pages/datetime-picker/index.js

@@ -15,10 +15,18 @@ Page({
     formatter(type, value) {
       if (type === 'year') {
         return `${value}年`;
-      } else if (type === 'month') {
+      }
+      if (type === 'month') {
         return `${value}月`;
       }
       return value;
+    },
+    filter(type, options) {
+      if (type === 'minute') {
+        return options.filter(option => option % 5 === 0);
+      }
+
+      return options;
     }
   },
 

example/pages/datetime-picker/index.wxml

@@ -41,4 +41,12 @@
   />
 </demo-block>
 
+<demo-block title="选项过滤器">
+  <van-datetime-picker
+    type="time"
+    value="{{ currentDate4 }}"
+    filter="{{ filter }}"
+  />
+</demo-block>
+
 <van-toast id="van-toast" />

packages/datetime-picker/README.md

@@ -144,6 +144,33 @@ Page({
 });
 ```
 
+### 选项过滤器
+
+通过传入 `filter` 函数，可以对选项数组进行过滤，实现自定义时间间隔
+
+```html
+<van-datetime-picker
+  type="time"
+  value="{{ currentDate }}"
+  filter="{{ filter }}"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentDate: '12:00',
+    filter(type, options) {
+      if (type === 'minute') {
+        return options.filter(option => option % 5 === 0)
+      }
+
+      return options;
+    }
+  }
+});
+```
+
 ### Props
 
 | 参数 | 说明 | 类型 | 默认值 |
@@ -156,6 +183,7 @@ Page({
 | max-hour | 可选的最大小时，针对 time 类型 | *number* | `23` |
 | min-minute | 可选的最小分钟，针对 time 类型 | *number* | `0` |
 | max-minute | 可选的最大分钟，针对 time 类型 | *number* | `59` |
+| filter | 选项过滤函数 | *(type, values) => values* | - |
 | formatter | 选项格式化函数 | *(type, value) => value* | - |
 | title | 顶部栏标题 | *string* | `''` |
 | show-toolbar | 是否显示顶部栏 | *boolean* | `false` |

packages/datetime-picker/index.ts

@@ -49,6 +49,7 @@ VantComponent({
       type: Function,
       value: defaultFormatter
     },
+    filter: Function,
     value: null,
     type: {
       type: String,
@@ -129,19 +130,32 @@ VantComponent({
 
     updateColumns() {
       const { formatter = defaultFormatter } = this.data;
-      const results = this.getRanges().map(({ type, range }) => {
+      const results = this.getOriginColumns().map(column => ({
-        const values = times(range[1] - range[0] + 1, index => {
+        values: column.values.map(value => formatter(column.type, value))
-          let value = range[0] + index;
+      }));
-          value = type === 'year' ? `${value}` : padZero(value);
-          return formatter(type, value);
-        });
-
-        return { values };
-      });
 
       return this.set({ columns: results });
     },
 
+    getOriginColumns() {
+      const { filter } = this.data;
+      const results = this.getRanges().map(({ type, range }) => {
+        let values = times(range[1] - range[0] + 1, index => {
+          let value = range[0] + index;
+          value = type === 'year' ? `${value}` : padZero(value);
+          return value;
+        });
+
+        if (filter) {
+          values = filter(type, values);
+        }
+
+        return { type, values };
+      });
+
+      return results;
+    },
+
     getRanges() {
       const { data } = this;
       if (data.type === 'time') {