feat(DatetimePicker): add month-day type (#6395)

This commit is contained in:
neverland
2020-05-28 10:35:06 +08:00
committed by GitHub
parent d8b6401cf0
commit 661fd07233
6 changed files with 365 additions and 46 deletions
+45 -3
View File
@@ -17,6 +17,8 @@ Vue.use(DatetimePicker);
### 选择年月日
DatetimePicker 通过 type 属性来定义需要选择的时间类型,type 为 `date` 表示选择年月日。通过 min-date 和 max-date 属性可以确定可选的时间范围。
```html
<van-datetime-picker
v-model="currentDate"
@@ -41,7 +43,7 @@ export default {
### 选择年月
通过传入`formatter`函数,可以对选项文字进行格式化处理
将 type 设置为 `year-month` 即可选择年份和月份。通过传入`formatter`函数,可以对选项文字进行格式化处理
```html
<van-datetime-picker
@@ -76,8 +78,47 @@ export default {
};
```
### 选择年月
将 type 设置为 `month-day` 即可选择月份和日期(从 2.8.4 版本开始支持)
```html
<van-datetime-picker
v-model="currentDate"
type="month-day"
title="选择月日"
:min-date="minDate"
:max-date="maxDate"
:formatter="formatter"
/>
```
```js
export default {
data() {
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
currentDate: new Date(),
};
},
methods: {
formatter(type, val) {
if (type === 'month') {
return `${val}`;
} else if (type === 'day') {
return `${val}`;
}
return val;
},
},
};
```
### 选择时间
将 type 设置为 `time` 即可选择时间(小时和分钟)
```html
<van-datetime-picker
v-model="currentTime"
@@ -100,6 +141,8 @@ export default {
### 选择完整时间
将 type 设置为 `datetime` 即可选择完整时间,包括年月日和小时、分钟。
```html
<van-datetime-picker
v-model="currentDate"
@@ -142,7 +185,6 @@ export default {
if (type === 'minute') {
return options.filter((option) => option % 5 === 0);
}
return options;
},
},
@@ -155,7 +197,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| type | 类型,可选值为 `date` <br> `time` `year-month` | _string_ | `datetime` |
| type | 时间类型,可选值为 `date` `time` <br> `year-month` `month-day` | _string_ | `datetime` |
| title | 顶部栏标题 | _string_ | `''` |
| confirm-button-text | 确认按钮文字 | _string_ | `确认` |
| cancel-button-text | 取消按钮文字 | _string_ | `取消` |