feat(DatetimePicker): add month-day type (#6395)
This commit is contained in:
@@ -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_ | `取消` |
|
||||
|
||||
Reference in New Issue
Block a user