blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-08-09 22:19:45 +08:00
Code Issues Projects Releases Wiki Activity

[Improvement] DatetimePicker: support text formatter (#1497)

Browse Source
This commit is contained in:
neverland 2018-07-16 21:50:18 +08:00 committed by GitHub
parent 0b735ac639
commit 1b702c0a21
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 105 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,6 +22,7 @@
v-model="currentDate3" v-model="currentDate3"
type="year-month" type="year-month"
:min-date="minDate" :min-date="minDate"
:formatter="formatter"
/> />
</demo-block> </demo-block>
@ -43,13 +44,17 @@ export default {
title1: '选择完整时间', title1: '选择完整时间',
title2: '选择日期（年月日）', title2: '选择日期（年月日）',
title3: '选择日期（年月）', title3: '选择日期（年月）',
title4: '选择时间' title4: '选择时间',
year: '年',
month: '月'
}, },
'en-US': { 'en-US': {
title1: 'Choose DateTime', title1: 'Choose DateTime',
title2: 'Choose Date', title2: 'Choose Date',
title3: 'Choose Year-Month', 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), currentDate3: new Date(2018, 0, 1),
currentDate4: '12:00' 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> </script>

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

@ -62,6 +62,7 @@ export default {
v-model="currentDate" v-model="currentDate"
type="year-month" type="year-month"
:min-date="minDate" :min-date="minDate"
:formatter="formatter"
/> />
``` ```
@ -71,6 +72,17 @@ export default {
return { return {
currentDate: new Date() 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 | | 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 | | min-date | Min date | `Date` | Ten years ago on January 1 |
| max-date | Max date | `Date` | Ten years later on December 31 | | max-date | Max date | `Date` | Ten years later on December 31 |
| min-hour | Min hour | `Number` | `0` | | min-hour | Min hour | `Number` | `0` |
| max-hour | Max hour | `Number` | `23` | | max-hour | Max hour | `Number` | `23` |
| 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` |
| item-height | Option height | `Number` | `44` | | item-height | Option height | `Number` | `44` |

45
packages/datetime-picker/index.vue
View File

@ -32,6 +32,7 @@ export default create({
value: {}, value: {},
title: String, title: String,
itemHeight: Number, itemHeight: Number,
formatter: Function,
visibleItemCount: Number, visibleItemCount: Number,
confirmButtonText: String, confirmButtonText: String,
cancelButtonText: String, cancelButtonText: String,
@ -90,8 +91,14 @@ export default create({
ranges() { ranges() {
if (this.type === 'time') { if (this.type === 'time') {
return [ 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 { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', this.innerValue);
const result = [ const result = [
[minYear, maxYear], {
[minMonth, maxMonth], type: 'year',
[minDate, maxDate], range: [minYear, maxYear]
[minHour, maxHour], },
[minMinute, maxMinute] {
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 === 'date') result.splice(3, 2);
if (this.type === 'year-month') result.splice(2, 3); if (this.type === 'year-month') result.splice(2, 3);
return result; return result;
}, },
columns() { 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 values = this.times(range[1] - range[0] + 1, index => {
const value = range[0] + index; let value = range[0] + index;
return value < 10 ? `0${value}` : `${value}`; value = value < 10 ? `0${value}` : `${value}`;
return this.formatter ? this.formatter(type, value) : value;
}); });
return { return {
values values
}; };
}); });
return results; return results;
} }
}, },

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

@ -254,33 +254,33 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height:220px;"> <div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column" style="height:220px;"> <div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"> <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 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;">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;">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;">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;">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;">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;">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;">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;">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;">2027年</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2028</li> <li class="van-ellipsis van-picker-column__item" style="height:44px;">2028年</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column" style="height:220px;"> <div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"> <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 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;">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;">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;">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;">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;">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;">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;">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;">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;">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;">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;">12月</li>
</ul> </ul>
</div> </div>
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div> <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>

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

@ -56,12 +56,14 @@ export default {
``` ```
#### 选择日期（年月） #### 选择日期（年月）
通过传入 `formatter` 函数对选项文字进行处理
```html ```html
<van-datetime-picker <van-datetime-picker
v-model="currentDate" v-model="currentDate"
type="year-month" type="year-month"
:min-date="minDate" :min-date="minDate"
:formatter="formatter"
/> />
``` ```
@ -71,6 +73,17 @@ export default {
return { return {
currentDate: new Date() 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 日 | | min-date | 可选的最小日期 | `Date` | 十年前的 1 月 1 日 |
| max-date | 可选的最大日期 | `Date` | 十年后的 12 月 31 日 | | max-date | 可选的最大日期 | `Date` | 十年后的 12 月 31 日 |
| min-hour | 可选的最小小时，针对 time 类型 | `Number` | `0` | | min-hour | 可选的最小小时，针对 time 类型 | `Number` | `0` |
| max-hour | 可选的最大小时，针对 time 类型 | `Number` | `23` | | max-hour | 可选的最大小时，针对 time 类型 | `Number` | `23` |
| formatter | 选项格式化函数 | `(type, value) => value` | - |
| title | 顶部栏标题 | `String` | `''` | | title | 顶部栏标题 | `String` | `''` |
| loading | 是否显示加载状态 | `Boolean` | `false` | | loading | 是否显示加载状态 | `Boolean` | `false` |
| item-height | 选项高度 | `Number` | `44` | | item-height | 选项高度 | `Number` | `44` |