fix(date-picker): block transition when calendar time change

This commit is contained in:
07akioni 2019-09-16 12:11:25 +08:00
parent 86a51f4fa3
commit 697e649edb
5 changed files with 36 additions and 14 deletions

View File

@ -27,8 +27,8 @@ export default {
if (this.active) {
this.noTransition = true
this.$nextTick().then(() => {
if (this.$refs.self) {
this.$refs.self.getBoundingClientRect()
if (this.$el) {
this.$el.getBoundingClientRect()
}
this.noTransition = false
})

View File

@ -74,8 +74,8 @@
class="n-date-picker-calendar__dates"
>
<div
v-for="dateItem in dateArray(startCalendarDateTime, valueAsMomentArray, currentDateTime)"
:key="`${dateItem.timestamp}${dateItem.isDateOfDisplayMonth}`"
v-for="(dateItem, i) in dateArray(startCalendarDateTime, valueAsMomentArray, currentDateTime)"
:key="i"
class="n-date-picker-calendar__date"
:class="{
'n-date-picker-calendar__date--current': dateItem.isCurrentDate,
@ -159,8 +159,8 @@
class="n-date-picker-calendar__dates"
>
<div
v-for="dateItem in dateArray(endCalendarDateTime, valueAsMomentArray, currentDateTime)"
:key="`${dateItem.timestamp}${dateItem.isDateOfDisplayMonth}`"
v-for="(dateItem, i) in dateArray(endCalendarDateTime, valueAsMomentArray, currentDateTime)"
:key="i"
class="n-date-picker-calendar__date"
:class="{
'n-date-picker-calendar__date--current': dateItem.isCurrentDate,

View File

@ -106,8 +106,8 @@
class="n-date-picker-calendar__dates"
>
<div
v-for="dateItem in dateArray(startCalendarDateTime, valueAsMomentArray, currentDateTime)"
:key="`${dateItem.timestamp}${dateItem.isDateOfDisplayMonth}`"
v-for="(dateItem, i) in dateArray(startCalendarDateTime, valueAsMomentArray, currentDateTime)"
:key="i"
class="n-date-picker-calendar__date"
:class="{
'n-date-picker-calendar__date--current': dateItem.isCurrentDate,
@ -191,8 +191,8 @@
class="n-date-picker-calendar__dates"
>
<div
v-for="dateItem in dateArray(endCalendarDateTime, valueAsMomentArray, currentDateTime)"
:key="`${dateItem.timestamp}${dateItem.isDateOfDisplayMonth}`"
v-for="(dateItem, i) in dateArray(endCalendarDateTime, valueAsMomentArray, currentDateTime)"
:key="i"
class="n-date-picker-calendar__date"
:class="{
'n-date-picker-calendar__date--current': dateItem.isCurrentDate,

View File

@ -68,6 +68,28 @@ export default {
} else return null
}
},
watch: {
startCalendarDateTime (newCalendarDateTime, oldCalendarDateTime) {
if (newCalendarDateTime.isValid() && oldCalendarDateTime) {
if (
newCalendarDateTime.year() !== oldCalendarDateTime.year() ||
newCalendarDateTime.month() !== oldCalendarDateTime.month()
) {
this.banTransitionOneTick()
}
}
},
endCalendarDateTime (newCalendarDateTime, oldCalendarDateTime) {
if (newCalendarDateTime.isValid() && oldCalendarDateTime) {
if (
newCalendarDateTime.year() !== oldCalendarDateTime.year() ||
newCalendarDateTime.month() !== oldCalendarDateTime.month()
) {
this.banTransitionOneTick()
}
}
}
},
methods: {
resetSelectingStatus (e) {
if (this.$refs.startDates.contains(e.target) || this.$refs.endDates.contains(e.target)) {

View File

@ -170,16 +170,16 @@ export default {
}
},
nextYear () {
this.calendarDateTime = moment(this.calendarDateTime.add(1, 'year'))
this.calendarDateTime = moment(this.calendarDateTime).add(1, 'year')
},
prevYear () {
this.calendarDateTime = moment(this.calendarDateTime.subtract(1, 'year'))
this.calendarDateTime = moment(this.calendarDateTime).subtract(1, 'year')
},
nextMonth () {
this.calendarDateTime = moment(this.calendarDateTime.add(1, 'month'))
this.calendarDateTime = moment(this.calendarDateTime).add(1, 'month')
},
prevMonth () {
this.calendarDateTime = moment(this.calendarDateTime.subtract(1, 'month'))
this.calendarDateTime = moment(this.calendarDateTime).subtract(1, 'month')
}
}
}