mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-08-07 04:59:46 +08:00
[Improvement] DatetimePicker: support text formatter (#1497)
This commit is contained in:
neverland
GitHub
parent
0b735ac639
commit
1b702c0a21
@ -22,6 +22,7 @@
|
||||
v-model="currentDate3"
|
||||
type="year-month"
|
||||
:min-date="minDate"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
@ -43,13 +44,17 @@ export default {
|
||||
title1: '选择完整时间',
|
||||
title2: '选择日期（年月日）',
|
||||
title3: '选择日期（年月）',
|
||||
title4: '选择时间'
|
||||
title4: '选择时间',
|
||||
year: '年',
|
||||
month: '月'
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Choose DateTime',
|
||||
title2: 'Choose Date',
|
||||
title3: 'Choose Year-Month',
|
||||
title4: 'Choose Time'
|
||||
title4: 'Choose Time',
|
||||
year: ' Year',
|
||||
month: ' Month'
|
||||
}
|
||||
},
|
||||
|
||||
@ -64,6 +69,17 @@ export default {
|
||||
currentDate3: new Date(2018, 0, 1),
|
||||
currentDate4: '12:00'
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatter(type, value) {
|
||||
if (type === 'year') {
|
||||
return value + this.$t('year');
|
||||
} else if (type === 'month') {
|
||||
return value + this.$t('month');
|
||||
}
|
||||
return value;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -62,6 +62,7 @@ export default {
|
||||
v-model="currentDate"
|
||||
type="year-month"
|
||||
:min-date="minDate"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -71,6 +72,17 @@ export default {
|
||||
return {
|
||||
currentDate: new Date()
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatter(type, value) {
|
||||
if (type === 'year') {
|
||||
return `${value} Year`;
|
||||
} else if (type === 'month') {
|
||||
return `${value} Month`
|
||||
}
|
||||
return value;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -100,11 +112,12 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | Can be set to `date` `time` `year-month` | `String` | `datetime` |
|
||||
| type | Can be set to `date` `time`<br> `year-month` | `String` | `datetime` |
|
||||
| min-date | Min date | `Date` | Ten years ago on January 1 |
|
||||
| max-date | Max date | `Date` | Ten years later on December 31 |
|
||||
| min-hour | Min hour | `Number` | `0` |
|
||||
| max-hour | Max hour | `Number` | `23` |
|
||||
| formatter | Option text formatter | `(type, value) => value` | - |
|
||||
| title | Toolbar title | `String` | `''` |
|
||||
| loading | Whether to show loading prompt | `Boolean` | `false` |
|
||||
| item-height | Option height | `Number` | `44` |
|
||||
|
||||
@ -32,6 +32,7 @@ export default create({
|
||||
value: {},
|
||||
title: String,
|
||||
itemHeight: Number,
|
||||
formatter: Function,
|
||||
visibleItemCount: Number,
|
||||
confirmButtonText: String,
|
||||
cancelButtonText: String,
|
||||
@ -90,8 +91,14 @@ export default create({
|
||||
ranges() {
|
||||
if (this.type === 'time') {
|
||||
return [
|
||||
[this.minHour, this.maxHour],
|
||||
[0, 59]
|
||||
{
|
||||
type: 'hour',
|
||||
range: [this.minHour, this.maxHour]
|
||||
},
|
||||
{
|
||||
type: 'minute',
|
||||
range: [0, 59]
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
@ -99,28 +106,46 @@ export default create({
|
||||
const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', this.innerValue);
|
||||
|
||||
const result = [
|
||||
[minYear, maxYear],
|
||||
[minMonth, maxMonth],
|
||||
[minDate, maxDate],
|
||||
[minHour, maxHour],
|
||||
[minMinute, maxMinute]
|
||||
{
|
||||
type: 'year',
|
||||
range: [minYear, maxYear]
|
||||
},
|
||||
{
|
||||
type: 'month',
|
||||
range: [minMonth, maxMonth]
|
||||
},
|
||||
{
|
||||
type: 'day',
|
||||
range: [minDate, maxDate]
|
||||
},
|
||||
{
|
||||
type: 'hour',
|
||||
range: [minHour, maxHour]
|
||||
},
|
||||
{
|
||||
type: 'minute',
|
||||
range: [minMinute, maxMinute]
|
||||
}
|
||||
];
|
||||
|
||||
if (this.type === 'date') result.splice(3, 2);
|
||||
if (this.type === 'year-month') result.splice(2, 3);
|
||||
return result;
|
||||
},
|
||||
|
||||
columns() {
|
||||
const results = this.ranges.map(range => {
|
||||
const results = this.ranges.map(({ type, range }) => {
|
||||
const values = this.times(range[1] - range[0] + 1, index => {
|
||||
const value = range[0] + index;
|
||||
return value < 10 ? `0${value}` : `${value}`;
|
||||
let value = range[0] + index;
|
||||
value = value < 10 ? `0${value}` : `${value}`;
|
||||
return this.formatter ? this.formatter(type, value) : value;
|
||||
});
|
||||
|
||||
return {
|
||||
values
|
||||
};
|
||||
});
|
||||
|
||||
return results;
|
||||
}
|
||||
},
|
||||
|
||||
@ -254,33 +254,33 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-picker__columns" style="height:220px;">
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">2018</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2019</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2020</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2021</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2022</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2023</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2024</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2025</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2026</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2027</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2028</li>
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">2018年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2019年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2020年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2021年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2022年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2023年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2024年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2025年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2026年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2027年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2028年</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" 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 van-picker-column__item--selected" 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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
|
||||
|
||||
@ -56,12 +56,14 @@ export default {
|
||||
```
|
||||
|
||||
#### 选择日期（年月）
|
||||
通过传入 `formatter` 函数对选项文字进行处理
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="year-month"
|
||||
:min-date="minDate"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -71,6 +73,17 @@ export default {
|
||||
return {
|
||||
currentDate: new Date()
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatter(type, value) {
|
||||
if (type === 'year') {
|
||||
return `${value}年`;
|
||||
} else if (type === 'month') {
|
||||
return `${value}月`
|
||||
}
|
||||
return value;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -100,11 +113,12 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 类型，可选值为 `date` `time` `year-month` | `String` | `datetime` |
|
||||
| type | 类型，可选值为 `date` `time`<br> `year-month` | `String` | `datetime` |
|
||||
| min-date | 可选的最小日期 | `Date` | 十年前的 1 月 1 日 |
|
||||
| max-date | 可选的最大日期 | `Date` | 十年后的 12 月 31 日 |
|
||||
| min-hour | 可选的最小小时，针对 time 类型 | `Number` | `0` |
|
||||
| max-hour | 可选的最大小时，针对 time 类型 | `Number` | `23` |
|
||||
| formatter | 选项格式化函数 | `(type, value) => value` | - |
|
||||
| title | 顶部栏标题 | `String` | `''` |
|
||||
| loading | 是否显示加载状态 | `Boolean` | `false` |
|
||||
| item-height | 选项高度 | `Number` | `44` |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user