From ab441cca9e4530ff68fee72a03cd38e8c97f5081 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Thu, 23 May 2019 17:06:56 +0800 Subject: [PATCH] [new feature] DatetimePicker: add filter prop --- docs/markdown/changelog.zh-CN.md | 4 ++ packages/datetime-picker/demo/index.vue | 33 ++++++++--- packages/datetime-picker/en-US.md | 39 +++++++++++-- packages/datetime-picker/index.js | 8 ++- .../test/__snapshots__/demo.spec.js.snap | 57 +++++++++++++++++++ packages/datetime-picker/zh-CN.md | 44 ++++++++++++-- 6 files changed, 167 insertions(+), 18 deletions(-) diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md index 5a753b457..c7e389265 100644 --- a/docs/markdown/changelog.zh-CN.md +++ b/docs/markdown/changelog.zh-CN.md @@ -6,6 +6,10 @@ - 新增`lock-scroll`属性 +##### DatetimePicker + +- 新增`filter`属性 + ##### DropdownItem - 新增`title-class`属性 diff --git a/packages/datetime-picker/demo/index.vue b/packages/datetime-picker/demo/index.vue index e85e9301f..453619fe4 100644 --- a/packages/datetime-picker/demo/index.vue +++ b/packages/datetime-picker/demo/index.vue @@ -28,10 +28,18 @@ + + + + @@ -46,7 +54,8 @@ export default { title3: '选择日期（年月）', title4: '选择时间', year: '年', - month: '月' + month: '月', + optionFilter: '选项过滤器' }, 'en-US': { title1: 'Choose DateTime', @@ -54,20 +63,20 @@ export default { title3: 'Choose Year-Month', title4: 'Choose Time', year: ' Year', - month: ' Month' + month: ' Month', + optionFilter: 'Option Filter' } }, data() { return { - minHour: 10, - maxHour: 20, minDate: new Date(2018, 0, 1), maxDate: new Date(2019, 10, 1), currentDate1: new Date(2018, 0, 1), currentDate2: null, currentDate3: new Date(2018, 0, 1), - currentDate4: '12:00' + currentTime1: '12:00', + currentTime2: '12:00', }; }, @@ -80,6 +89,14 @@ export default { return value + this.$t('month'); } return value; + }, + + filter(type, values) { + if (type === 'minute') { + return values.filter(value => value % 5 === 0); + } + + return values; } } }; diff --git a/packages/datetime-picker/en-US.md b/packages/datetime-picker/en-US.md index b4c9375d1..907facb26 100644 --- a/packages/datetime-picker/en-US.md +++ b/packages/datetime-picker/en-US.md @@ -94,10 +94,10 @@ export default { ```html ``` @@ -105,12 +105,42 @@ export default { export default { data() { return { - currentDate: '12:00' + currentTime: '12:00' }; } } ``` +### Option Filter + +```html + +``` + +```js +export default { + data() { + return { + currentTime: '12:00' + }; + }, + + methods: { + filter(type, options) { + if (type === 'minute') { + return options.filter(option => option % 5 === 0) + } + + return options; + } + } +} +``` + ## API ### Props @@ -124,6 +154,7 @@ export default { | max-hour | Max hour for `time` type | `Number` | `23` | | min-minute | Max minute for `time` type | `Number` | `0` | | max-minute | Max minute for `time` type | `Number` | `59` | +| filter | Option filter | `(type, values) => values` | - | | formatter | Option text formatter | `(type, value) => value` | - | | title | Toolbar title | `String` | `''` | | loading | Whether to show loading prompt | `Boolean` | `false` | diff --git a/packages/datetime-picker/index.js b/packages/datetime-picker/index.js index acc6cffeb..bb326f1c6 100644 --- a/packages/datetime-picker/index.js +++ b/packages/datetime-picker/index.js @@ -16,6 +16,7 @@ export default sfc({ props: { ...pickerProps, value: null, + filter: Function, minHour: Number, minMinute: Number, type: { @@ -147,12 +148,16 @@ export default sfc({ columns() { const results = this.ranges.map(({ type, range: rangeArr }) => { - const values = times(rangeArr[1] - rangeArr[0] + 1, index => { + let values = times(rangeArr[1] - rangeArr[0] + 1, index => { let value = rangeArr[0] + index; value = value < 10 ? `0${value}` : `${value}`; return this.formatter(type, value); }); + if (this.filter) { + values = this.filter(type, values); + } + return { values }; @@ -170,6 +175,7 @@ export default sfc({ correctValue(value) { // validate value const isDateType = this.type !== 'time'; + if (isDateType && !isValidDate(value)) { value = this.minDate; } else if (!value) { diff --git a/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap b/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap index 1db261c10..ab86e3f2e 100644 --- a/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap +++ b/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap @@ -381,5 +381,62 @@ exports[`renders demo correctly 1`] = ` +
+
+
+
取消
+
确认
+
+ +
+
+
    +
  • 00
    • +
  • 01
    • +
  • 02
    • +
  • 03
    • +
  • 04
    • +
  • 05
    • +
  • 06
    • +
  • 07
    • +
  • 08
    • +
  • 09
    • +
  • 10
    • +
  • 11
    • +
  • 12
    • +
  • 13
    • +
  • 14
    • +
  • 15
    • +
  • 16
    • +
  • 17
    • +
  • 18
    • +
  • 19
    • +
  • 20
    • +
  • 21
    • +
  • 22
    • +
  • 23
    • +
+
+
+
    +
  • 00
    • +
  • 05
    • +
  • 10
    • +
  • 15
    • +
  • 20
    • +
  • 25
    • +
  • 30
    • +
  • 35
    • +
  • 40
    • +
  • 45
    • +
  • 50
    • +
  • 55
    • +
+
+
+
+
+
+
`; diff --git a/packages/datetime-picker/zh-CN.md b/packages/datetime-picker/zh-CN.md index 6b797f1d7..2bdfd3123 100644 --- a/packages/datetime-picker/zh-CN.md +++ b/packages/datetime-picker/zh-CN.md @@ -60,7 +60,8 @@ export default { ``` ### 选择日期（年月） -通过传入 `formatter` 函数对选项文字进行处理 + +通过传入`formatter`函数，可以对选项文字进行格式化处理 ```html ``` @@ -107,12 +108,44 @@ export default { export default { data() { return { - currentDate: '12:00' + currentTime: '12:00' }; } } ``` +### 选项过滤器 + +通过传入`filter`函数，可以对选项数组进行过滤，实现自定义时间间隔 + +```html + +``` + +```js +export default { + data() { + return { + currentTime: '12:00' + }; + }, + + methods: { + filter(type, options) { + if (type === 'minute') { + return options.filter(option => option % 5 === 0) + } + + return options; + } + } +} +``` + ## API ### Props @@ -126,6 +159,7 @@ export default { | max-hour | 可选的最大小时，针对 time 类型 | `Number` | `23` | - | | min-minute | 可选的最小分钟，针对 time 类型 | `Number` | `0` | 1.1.15 | | max-minute | 可选的最大分钟，针对 time 类型 | `Number` | `59` | 1.1.15 | +| filter | 选项过滤函数 | `(type, values) => values` | - | 2.0.0 | | formatter | 选项格式化函数 | `(type, value) => value` | - | 1.1.14 | | title | 顶部栏标题 | `String` | `''` | 1.0.4 | | show-toolbar | 是否显示顶部栏 | `Boolean` | `false` | 1.0.2 |