From 661fd07233099f7c92e37ae57f86d19d2a860d0d Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 28 May 2020 10:35:06 +0800 Subject: [PATCH] feat(DatetimePicker): add month-day type (#6395) --- src/datetime-picker/DatePicker.js | 48 ++++-- src/datetime-picker/README.md | 38 ++++- src/datetime-picker/README.zh-CN.md | 48 +++++- src/datetime-picker/demo/index.vue | 73 ++++++--- .../test/__snapshots__/demo.spec.js.snap | 150 ++++++++++++++++++ src/datetime-picker/test/date-picker.spec.js | 54 +++++++ 6 files changed, 365 insertions(+), 46 deletions(-) diff --git a/src/datetime-picker/DatePicker.js b/src/datetime-picker/DatePicker.js index 0999428d4..6baef67e7 100644 --- a/src/datetime-picker/DatePicker.js +++ b/src/datetime-picker/DatePicker.js @@ -1,4 +1,4 @@ -import { createNamespace } from '../utils'; +import { createNamespace, get } from '../utils'; import { isDate } from '../utils/validate/date'; import { padZero } from '../utils/format/string'; import { getTrueValue, getMonthEndDay } from './utils'; @@ -60,7 +60,7 @@ export default createComponent({ minMinute, } = this.getBoundary('min', this.innerValue); - const result = [ + let result = [ { type: 'year', range: [minYear, maxYear], @@ -83,8 +83,18 @@ export default createComponent({ }, ]; - if (this.type === 'date') result.splice(3, 2); - if (this.type === 'year-month') result.splice(2, 3); + if (this.type === 'date') { + result = result.slice(0, 3); + } + + if (this.type === 'year-month') { + result = result.slice(0, 2); + } + + if (this.type === 'month-day') { + result = result.slice(1, 3); + } + return result; }, }, @@ -139,35 +149,39 @@ export default createComponent({ }, updateInnerValue() { + const { type } = this; const indexes = this.getPicker().getIndexes(); - const getValue = (index) => { const { values } = this.originColumns[index]; return getTrueValue(values[indexes[index]]); }; - const year = getValue(0); - const month = getValue(1); - const maxDate = getMonthEndDay(year, month); + let year; + let month; + let day; - let date; - if (this.type === 'year-month') { - date = 1; + if (type === 'month-day') { + year = this.innerValue.getFullYear(); + month = getValue(0); + day = getValue(1); } else { - date = getValue(2); + year = getValue(0); + month = getValue(1); + day = type === 'year-month' ? 1 : getValue(2); } - date = date > maxDate ? maxDate : date; + const maxDay = getMonthEndDay(year, month); + day = day > maxDay ? maxDay : day; let hour = 0; let minute = 0; - if (this.type === 'datetime') { + if (type === 'datetime') { hour = getValue(3); minute = getValue(4); } - const value = new Date(year, month - 1, date, hour, minute); + const value = new Date(year, month - 1, day, hour, minute); this.innerValue = this.formatValue(value); }, @@ -203,6 +217,10 @@ export default createComponent({ values = values.slice(0, 2); } + if (this.type === 'month-day') { + values = values.slice(1, 3); + } + this.$nextTick(() => { this.getPicker().setValues(values); }); diff --git a/src/datetime-picker/README.md b/src/datetime-picker/README.md index bcd85a02a..93de87b90 100644 --- a/src/datetime-picker/README.md +++ b/src/datetime-picker/README.md @@ -74,6 +74,41 @@ export default { }; ``` +### Choose Month-Day + +```html + +``` + +```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} Month`; + } else if (type === 'day') { + return `${val} Day`; + } + return val; + }, + }, +}; +``` + ### Choose Time ```html @@ -143,7 +178,6 @@ export default { if (type === 'minute') { return options.filter((option) => option % 5 === 0); } - return options; }, }, @@ -156,7 +190,7 @@ 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` `month-day` | _string_ | `datetime` | | title | Toolbar title | _string_ | `''` | | confirm-button-text | Text of confirm button | _string_ | `Confirm` | | cancel-button-text | Text of cancel button | _string_ | `Cancel` | diff --git a/src/datetime-picker/README.zh-CN.md b/src/datetime-picker/README.zh-CN.md index fffceddf1..e9db92cbe 100644 --- a/src/datetime-picker/README.zh-CN.md +++ b/src/datetime-picker/README.zh-CN.md @@ -17,6 +17,8 @@ Vue.use(DatetimePicker); ### 选择年月日 +DatetimePicker 通过 type 属性来定义需要选择的时间类型，type 为 `date` 表示选择年月日。通过 min-date 和 max-date 属性可以确定可选的时间范围。 + ```html +``` + +```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 option % 5 === 0); } - return options; }, }, @@ -155,7 +197,7 @@ export default { | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| type | 类型，可选值为 `date`
`time` `year-month` | _string_ | `datetime` | +| type | 时间类型，可选值为 `date` `time`
`year-month` `month-day` | _string_ | `datetime` | | title | 顶部栏标题 | _string_ | `''` | | confirm-button-text | 确认按钮文字 | _string_ | `确认` | | cancel-button-text | 取消按钮文字 | _string_ | `取消` | diff --git a/src/datetime-picker/demo/index.vue b/src/datetime-picker/demo/index.vue index be0d5ddd5..9e8fbf613 100644 --- a/src/datetime-picker/demo/index.vue +++ b/src/datetime-picker/demo/index.vue @@ -1,41 +1,52 @@