From f49c21a7caec3583b67206144b315d6abb1598f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Thu, 26 Dec 2019 10:10:29 +0800 Subject: [PATCH] feat(Calendar): add default-date prop and remove v-model --- src/calendar/README.zh-CN.md | 29 ++++++++------------- src/calendar/components/Month.js | 8 +++--- src/calendar/demo/index.vue | 13 +++++----- src/calendar/index.js | 43 ++++++++++++++++---------------- 4 files changed, 42 insertions(+), 51 deletions(-) diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md index 2ba45c46a..8f3d8ebf8 100644 --- a/src/calendar/README.zh-CN.md +++ b/src/calendar/README.zh-CN.md @@ -23,7 +23,7 @@ Vue.use(Calendar); @@ -35,7 +35,7 @@ Vue.use(Calendar); position="bottom" style="height: 80vh;" > - + ``` @@ -44,18 +44,14 @@ export default { data() { return { // 当前选中的日期 - currentDate: null, + selectedDate: '', showCalendar: false }; }, computed: { - // 将 Date 格式化为 YYYY/MM/DD 的格式 - formattedDate() { - const date = this.currentDate; - if (date) { - return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`; - } + onSelect(date) { + this.selectedDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`; } } } @@ -63,28 +59,23 @@ export default { ### 选择日期区间 -设置`type`为`range`后可以选择日期区间，此时`v-model`绑定的 currrentDate 为数组结构，数组第一项为开始时间，第二项为结束时间。 +设置`type`为`range`后可以选择日期区间，此时`select`事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。 ```html - + ``` ```js export default { data() { return { - currrentDate: [] + selectedDate: [] }; }, methods: { onSelect(date) { - console.log('开始时间: ' + date[0]); - console.log('结束时间: ' + date[1]); + this.selectedDate = date; } } } @@ -96,11 +87,11 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| -| v-model | 当前选中的日期 | *Date* | - | - | | type | 选择类型，`single`表示选择单个日期，
`range`表示选择日期区间 | *string* | `single` | - | | title | 日历标题 | *string* | `日期选择` | - | | min-date | 最小日期 | *Date* | 当前日期 | - | | max-date | 最大日期 | *Date* | 当前日期的六个月后 | - | +| default-date | 默认选中的日期 | *Date \| Date[]* | 今天 | - | | row-height | 日期所在行的高度 | *number* | `64` | - | | button-text | 确认按钮的文字 | *string* | `确定` | - | | button-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` | - | diff --git a/src/calendar/components/Month.js b/src/calendar/components/Month.js index c0e19086c..4cbd844ac 100644 --- a/src/calendar/components/Month.js +++ b/src/calendar/components/Month.js @@ -13,7 +13,7 @@ export default createComponent({ showMark: Boolean, showTitle: Boolean, rowHeight: Number, - currentValue: [Date, Array] + currentDate: [Date, Array] }, data() { @@ -76,18 +76,18 @@ export default createComponent({ methods: { getDayType(day) { - const { type, minDate, maxDate, currentValue } = this; + const { type, minDate, maxDate, currentDate } = this; if (compareDay(day, minDate) < 0 || compareDay(day, maxDate) > 0) { return 'disabled'; } if (type === 'single') { - return compareDay(day, currentValue) === 0 ? 'selected' : ''; + return compareDay(day, currentDate) === 0 ? 'selected' : ''; } if (type === 'range') { - const [startDay, endDay] = this.currentValue; + const [startDay, endDay] = this.currentDate; if (!startDay) { return; diff --git a/src/calendar/demo/index.vue b/src/calendar/demo/index.vue index 1b978ea7b..aebf87dfa 100644 --- a/src/calendar/demo/index.vue +++ b/src/calendar/demo/index.vue @@ -15,10 +15,7 @@ position="bottom" style="height: 80vh;" > - + @@ -93,6 +89,11 @@ export default { const [start, end] = dateRange; return `${this.formatDate(start)} - ${this.formatDate(end)}`; } + }, + + onSelect(date, type) { + this.date[type] = date; + this.show[type] = false; } } }; diff --git a/src/calendar/index.js b/src/calendar/index.js index 92df220d6..22b841705 100644 --- a/src/calendar/index.js +++ b/src/calendar/index.js @@ -18,8 +18,8 @@ import Header from './components/Header'; export default createComponent({ props: { title: String, - value: [Date, Array], buttonText: String, + defaultDate: [Date, Array], buttonDisabledText: String, type: { type: String, @@ -27,16 +27,16 @@ export default createComponent({ }, minDate: { type: Date, - default: () => new Date(), - validator: isDate + validator: isDate, + default: () => new Date() }, maxDate: { type: Date, + validator: isDate, default() { const now = new Date(); return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate()); - }, - validator: isDate + } }, rowHeight: { type: Number, @@ -55,7 +55,7 @@ export default createComponent({ data() { return { monthTitle: '', - currentValue: this.getDefaultValue() + currentDate: this.getInitialDate() }; }, @@ -76,8 +76,8 @@ export default createComponent({ }, watch: { - value(val) { - this.currentValue = val; + defaultDate(val) { + this.currentDate = val; } }, @@ -87,16 +87,16 @@ export default createComponent({ }, methods: { - getDefaultValue() { - const { type, value, minDate } = this; + getInitialDate() { + const { type, defaultDate, minDate } = this; if (type === 'single') { - return value || minDate; + return defaultDate || minDate; } if (type === 'range') { - const range = value || []; - return [range[0] || minDate, range[1] || getNextDay(minDate)]; + const [startDay, endDay] = defaultDate || []; + return [startDay || minDate, endDay || getNextDay(minDate)]; } }, @@ -132,32 +132,31 @@ export default createComponent({ const { date } = item; if (this.type === 'single') { - this.$emit('input', date); + this.currentDate = date; this.$emit('select', date); } if (this.type === 'range') { - const [startDay, endDay] = this.currentValue; + const [startDay, endDay] = this.currentDate; if (startDay && !endDay) { const compareToStart = compareDay(date, startDay); if (compareToStart === 1) { - this.$emit('input', [startDay, date]); + this.currentDate = [startDay, date]; } if (compareToStart === -1) { - this.$emit('input', [date, null]); + this.currentDate = [date, null]; } } else { - this.$emit('input', [date, null]); + this.currentDate = [date, null]; } } }, onConfirmRange() { - this.$emit('input', this.currentValue); - this.$emit('select', this.currentValue); + this.$emit('select', this.currentDate); }, genMonth(date, index) { @@ -172,7 +171,7 @@ export default createComponent({ showMark={this.showMark} rowHeight={this.rowHeight} showTitle={index !== 0} - currentValue={this.currentValue} + currentDate={this.currentDate} onClick={this.onClickDay} /> ); @@ -186,7 +185,7 @@ export default createComponent({ } if (this.type === 'range') { - const disabled = !this.currentValue[1]; + const disabled = !this.currentDate[1]; const text = disabled ? this.buttonDisabledText : this.buttonText; return (