blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[new feature] DatetimePicker: add filter prop

Browse Source
This commit is contained in:
陈嘉涵 2019-05-23 17:06:56 +08:00
parent 14ac581ac6
commit ab441cca9e
6 changed files with 167 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/markdown/changelog.zh-CN.md
View File

@ -6,6 +6,10 @@
- 新增`lock-scroll`属性 - 新增`lock-scroll`属性
##### DatetimePicker
- 新增`filter`属性
##### DropdownItem ##### DropdownItem
- 新增`title-class`属性 - 新增`title-class`属性

33
packages/datetime-picker/demo/index.vue
View File

@ -28,10 +28,18 @@
<demo-block :title="$t('title4')"> <demo-block :title="$t('title4')">
<van-datetime-picker <van-datetime-picker
v-model="currentDate4" v-model="currentTime1"
type="time" type="time"
:min-hour="minHour" :min-hour="10"
:max-hour="maxHour" :max-hour="20"
/>
</demo-block>
<demo-block :title="$t('optionFilter')">
<van-datetime-picker
v-model="currentTime2"
type="time"
:filter="filter"
/> />
</demo-block> </demo-block>
</demo-section> </demo-section>
@ -46,7 +54,8 @@ export default {
title3: '选择日期（年月）', title3: '选择日期（年月）',
title4: '选择时间', title4: '选择时间',
year: '年', year: '年',
month: '月' month: '月',
optionFilter: '选项过滤器'
}, },
'en-US': { 'en-US': {
title1: 'Choose DateTime', title1: 'Choose DateTime',
@ -54,20 +63,20 @@ export default {
title3: 'Choose Year-Month', title3: 'Choose Year-Month',
title4: 'Choose Time', title4: 'Choose Time',
year: ' Year', year: ' Year',
month: ' Month' month: ' Month',
optionFilter: 'Option Filter'
} }
}, },
data() { data() {
return { return {
minHour: 10,
maxHour: 20,
minDate: new Date(2018, 0, 1), minDate: new Date(2018, 0, 1),
maxDate: new Date(2019, 10, 1), maxDate: new Date(2019, 10, 1),
currentDate1: new Date(2018, 0, 1), currentDate1: new Date(2018, 0, 1),
currentDate2: null, currentDate2: null,
currentDate3: new Date(2018, 0, 1), 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 + this.$t('month');
} }
return value; return value;
},
filter(type, values) {
if (type === 'minute') {
return values.filter(value => value % 5 === 0);
}
return values;
} }
} }
}; };

39
packages/datetime-picker/en-US.md
View File

@ -94,10 +94,10 @@ export default {
```html ```html
<van-datetime-picker <van-datetime-picker
v-model="currentDate" v-model="currentTime"
type="time" type="time"
:min-hour="minHour" :min-hour="10"
:max-hour="maxHour" :max-hour="20"
/> />
``` ```
@ -105,12 +105,42 @@ export default {
export default { export default {
data() { data() {
return { return {
currentDate: '12:00' currentTime: '12:00'
}; };
} }
} }
``` ```
### Option Filter
```html
<van-datetime-picker
v-model="currentTime"
type="time"
:filter="filter"
/>
```
```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 ## API
### Props ### Props
@ -124,6 +154,7 @@ export default {
| max-hour | Max hour for `time` type | `Number` | `23` | | max-hour | Max hour for `time` type | `Number` | `23` |
| min-minute | Max minute for `time` type | `Number` | `0` | | min-minute | Max minute for `time` type | `Number` | `0` |
| max-minute | Max minute for `time` type | `Number` | `59` | | max-minute | Max minute for `time` type | `Number` | `59` |
| filter | Option filter | `(type, values) => values` | - |
| formatter | Option text formatter | `(type, value) => value` | - | | formatter | Option text formatter | `(type, value) => value` | - |
| title | Toolbar title | `String` | `''` | | title | Toolbar title | `String` | `''` |
| loading | Whether to show loading prompt | `Boolean` | `false` | | loading | Whether to show loading prompt | `Boolean` | `false` |

8
packages/datetime-picker/index.js
View File

@ -16,6 +16,7 @@ export default sfc({
props: { props: {
...pickerProps, ...pickerProps,
value: null, value: null,
filter: Function,
minHour: Number, minHour: Number,
minMinute: Number, minMinute: Number,
type: { type: {
@ -147,12 +148,16 @@ export default sfc({
columns() { columns() {
const results = this.ranges.map(({ type, range: rangeArr }) => { 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; let value = rangeArr[0] + index;
value = value < 10 ? `0${value}` : `${value}`; value = value < 10 ? `0${value}` : `${value}`;
return this.formatter(type, value); return this.formatter(type, value);
}); });
if (this.filter) {
values = this.filter(type, values);
}
return { return {
values values
}; };
@ -170,6 +175,7 @@ export default sfc({
correctValue(value) { correctValue(value) {
// validate value // validate value
const isDateType = this.type !== 'time'; const isDateType = this.type !== 'time';
if (isDateType && !isValidDate(value)) { if (isDateType && !isValidDate(value)) {
value = this.minDate; value = this.minDate;
} else if (!value) { } else if (!value) {

57
packages/datetime-picker/test/__snapshots__/demo.spec.js.snap
View File

@ -381,5 +381,62 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div>
<div class="van-picker van-datetime-picker">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div class="van-picker__cancel">取消</div>
<div class="van-picker__confirm">确认</div>
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -440px, 0); transition-duration: 0ms; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
</div>
</div>
</div> </div>
`; `;

44
packages/datetime-picker/zh-CN.md
View File

@ -60,7 +60,8 @@ export default {
``` ```
### 选择日期（年月） ### 选择日期（年月）
通过传入 `formatter` 函数对选项文字进行处理
通过传入`formatter`函数，可以对选项文字进行格式化处理
```html ```html
<van-datetime-picker <van-datetime-picker
@ -96,10 +97,10 @@ export default {
```html ```html
<van-datetime-picker <van-datetime-picker
v-model="currentDate" v-model="currentTime"
type="time" type="time"
:min-hour="minHour" :min-hour="10"
:max-hour="maxHour" :max-hour="20"
/> />
``` ```
@ -107,12 +108,44 @@ export default {
export default { export default {
data() { data() {
return { return {
currentDate: '12:00' currentTime: '12:00'
}; };
} }
} }
``` ```
### 选项过滤器
通过传入`filter`函数，可以对选项数组进行过滤，实现自定义时间间隔
```html
<van-datetime-picker
v-model="currentTime"
type="time"
:filter="filter"
/>
```
```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 ## API
### Props ### Props
@ -126,6 +159,7 @@ export default {
| max-hour | 可选的最大小时，针对 time 类型 | `Number` | `23` | - | | max-hour | 可选的最大小时，针对 time 类型 | `Number` | `23` | - |
| min-minute | 可选的最小分钟，针对 time 类型 | `Number` | `0` | 1.1.15 | | min-minute | 可选的最小分钟，针对 time 类型 | `Number` | `0` | 1.1.15 |
| max-minute | 可选的最大分钟，针对 time 类型 | `Number` | `59` | 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 | | formatter | 选项格式化函数 | `(type, value) => value` | - | 1.1.14 |
| title | 顶部栏标题 | `String` | `''` | 1.0.4 | | title | 顶部栏标题 | `String` | `''` | 1.0.4 |
| show-toolbar | 是否显示顶部栏 | `Boolean` | `false` | 1.0.2 | | show-toolbar | 是否显示顶部栏 | `Boolean` | `false` | 1.0.2 |