From 98e5de656e36bbbb72735c260f17d57f5b14dc94 Mon Sep 17 00:00:00 2001 From: wemlion Date: Mon, 20 Aug 2018 17:26:19 +0800 Subject: [PATCH] fix(datepicker): fix keydown event for datepicker add monthrange and fix keydown for datepicker type date, month --- src/components/calendar/index.css | 2 +- src/components/calendar/index.vue | 4 +++ src/components/datepicker/daterange.vue | 38 +++++++++++++++++++------ src/components/datepicker/index.md | 29 +++++++++++++++++++ src/components/datepicker/index.vue | 35 ++++++++++++++++------- 5 files changed, 87 insertions(+), 21 deletions(-) diff --git a/src/components/calendar/index.css b/src/components/calendar/index.css index 7114a09a..85d17fc6 100644 --- a/src/components/calendar/index.css +++ b/src/components/calendar/index.css @@ -164,7 +164,7 @@ } .c-calendar__body .c-calendar__month-table td { - padding: 1.2em 1.6em; + padding: 1em; } .c-calendar__body table thead th, diff --git a/src/components/calendar/index.vue b/src/components/calendar/index.vue index 6cacf6aa..043f5a2e 100644 --- a/src/components/calendar/index.vue +++ b/src/components/calendar/index.vue @@ -144,6 +144,10 @@ export default { if (new Date(date) > new Date(this.maxDate)) date = this.maxDate if (new Date(date) < new Date(this.minDate)) date = this.minDate this.$emit('update', new Date(date).format(this.format), true) + }, + updateMonthBykeydown (num, type) { + const [year, month] = this.updateMonth(this.year, this.month, num, type) + this.$emit('update', new Date(year, month).format(this.format), true) } } } diff --git a/src/components/datepicker/daterange.vue b/src/components/datepicker/daterange.vue index 5dc1a248..7a909678 100644 --- a/src/components/datepicker/daterange.vue +++ b/src/components/datepicker/daterange.vue @@ -9,7 +9,7 @@ :maxDate="startMaxDate" :year="startYear" :month="startMonth" - :monthshow="startMonthsShow" + :monthsShow="startMonthsShow" @monthchange="startMonthChange" @yearchange="startYearChange" @monthshow="startMonthTableShow" @@ -20,6 +20,7 @@ :minDate="minDate" :maxDate="startMaxDate" :year="startYear" + :month="startMonth" @change="startSelectMonth" ) c-datetable( @@ -44,7 +45,7 @@ :maxDate="maxDate" :year="endYear" :month="endMonth" - :monthshow="endMonthsShow" + :monthsShow="endMonthsShow" @monthchange="endMonthChange" @yearchange="endYearChange" @monthshow="endMonthTableShow" @@ -55,6 +56,7 @@ :minDate="endMinDate" :maxDate="maxDate" :year="endYear" + :month="endMonth" @change="endSelectMonth" ) c-datetable( @@ -98,6 +100,10 @@ export default { value: [Array, String], size: String, show: Boolean, + type: { + type: String, + default: 'date' + }, minDate: { type: String, default: '1970-01-01' @@ -107,8 +113,7 @@ export default { default: '2099-12-31' }, pattern: { - type: String, - default: 'yyyy-MM-dd' + type: String } }, mixins: [Mixin], @@ -127,14 +132,18 @@ export default { rangeObj: { endDate: '', selecting: true - } + }, + format: '' } }, created () { const [start, end] = this.value this.start = start || '' this.end = end || '' + this.startMonthsShow = this.isMonthRange + this.endMonthsShow = this.isMonthRange this.updateDate() + this.format = this.pattern ? this.pattern : this.isMonthRange ? 'yyyy-MM' : 'yyyy-MM-dd' }, watch: { show (newVal) { @@ -145,14 +154,17 @@ export default { } }, computed: { + isMonthRange () { + return this.type === 'month' + }, className () { return this.size ? `is-${this.size}` : 'md' }, startMaxDate () { - return new Date(this.endYear, this.endMonth, 0).format(this.pattern) + return new Date(this.endYear, this.endMonth, 0).format(this.format) }, endMinDate () { - return new Date(this.startYear, this.startMonth + 1, 1).format(this.pattern) + return new Date(this.startYear, this.startMonth + 1, 1).format(this.format) } }, methods: { @@ -218,9 +230,13 @@ export default { this.startMonthsShow = show }, startSelectMonth (month) { - this.startMonthsShow = false + this.startMonthsShow = this.isMonthRange this.startMonth = month this.startDay = '' + if (this.isMonthRange) { + this.start = new Date(this.startYear, this.startMonth).format(this.format) + this.updateDate() + } }, selectDay (dateObj) { this.start = dateObj.start @@ -237,9 +253,13 @@ export default { this.endMonthsShow = show }, endSelectMonth (month) { - this.endMonthsShow = false + this.endMonthsShow = this.isMonthRange this.endMonth = month this.endDay = '' + if (this.isMonthRange) { + this.end = new Date(this.endYear, this.endMonth).format(this.format) + this.updateDate() + } }, cancel () { [this.start, this.end] = this.value diff --git a/src/components/datepicker/index.md b/src/components/datepicker/index.md index 35960775..13e02858 100644 --- a/src/components/datepicker/index.md +++ b/src/components/datepicker/index.md @@ -144,6 +144,35 @@ layout: component ``` +## 设置月份的范围 + +```html + + + +``` + ## API > 注意：当type为daterange时，v-model需要传递起始时间和终止时间的数组 diff --git a/src/components/datepicker/index.vue b/src/components/datepicker/index.vue index 517d15e6..bf553a8e 100644 --- a/src/components/datepicker/index.vue +++ b/src/components/datepicker/index.vue @@ -11,7 +11,7 @@ .c-datepicker__icon(:clas="className") c-icon(name="calendar") c-input( - v-if="type == 'daterange'" + v-if="type == 'daterange' || type == 'monthrange'" v-model="daterange" :placeholder="placeholder" :disabled="disabled" @@ -31,12 +31,13 @@ @change="dateChange" @focusin.native="open" @focusout.native="onBlur" + @keydown.native="onKeyDown" ) .c-datepicker__panel c-calendar( ref="calendar" - v-if="type !== 'daterange'" + v-if="type == 'date' || type == 'month'" :type="type" :pattern="datePattern" :value="date" @@ -55,6 +56,16 @@ :show="isOpen" @change="setDateRange" ) + .c-datepicker__body( + v-if="type == 'monthrange'" + ) + c-daterange( + :value="date" + :size="size" + :show="isOpen" + type="month" + @change="setDateRange" + )