diff --git a/packages/datetime-picker/demo/index.vue b/packages/datetime-picker/demo/index.vue index 57c681be5..2f4b2b3b9 100644 --- a/packages/datetime-picker/demo/index.vue +++ b/packages/datetime-picker/demo/index.vue @@ -22,6 +22,7 @@ v-model="currentDate3" type="year-month" :min-date="minDate" + :formatter="formatter" /> @@ -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; + } } }; diff --git a/packages/datetime-picker/en-US.md b/packages/datetime-picker/en-US.md index f8a9ea1cf..4112fee3b 100644 --- a/packages/datetime-picker/en-US.md +++ b/packages/datetime-picker/en-US.md @@ -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`
`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` | diff --git a/packages/datetime-picker/index.vue b/packages/datetime-picker/index.vue index 34ad35bbc..9eafe044d 100644 --- a/packages/datetime-picker/index.vue +++ b/packages/datetime-picker/index.vue @@ -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; } }, diff --git a/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap b/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap index 071d23ede..77c7f171e 100644 --- a/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap +++ b/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap @@ -254,33 +254,33 @@ exports[`renders demo correctly 1`] = `
diff --git a/packages/datetime-picker/zh-CN.md b/packages/datetime-picker/zh-CN.md index 8999f4d56..de758151d 100644 --- a/packages/datetime-picker/zh-CN.md +++ b/packages/datetime-picker/zh-CN.md @@ -56,12 +56,14 @@ export default { ``` #### 选择日期（年月） +通过传入 `formatter` 函数对选项文字进行处理 ```html ``` @@ -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`
`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` |