思路
当传入 Start 和 End 的时候,左右两边的日期一般是根据 Start 的日期进行确认的
<md-date-range-picker start="2018-01-01" end="2018-01-06"></md-date-range-picker>
这时候,这样 inside__leftCalendarMonth = moment(this.startDate) 是没问题的,这样左侧的 Calendar 就能根据 月份 渲染对应的日历了 renderCalendar
但有一个问题,当选择快捷键中的 Last Month,以及 根据 先从左侧 Calendar 选择 End,点击前一个月,选择 Start,此时 leftCalendar 需要根据 用户选择的 inside__start 来做更新了,就需要使用计算属性了,而不是在 data 中进行初始化。
computed: {
/**
* 需要声明为 computed prop 的原因:点击快捷键 Last Month 的时候,需要更新左侧的日历,让其切换到上个月份
* 写在 data 里面的效果如下:
*/
inside__leftCalendarMonth: {
get () {
return this.inside__start.clone();
},
set () {
// 这里啥都不能干,所以通过计算属性就没有意义了
},
}
},
methods: {
clickNextMonth() {
// TODO 如果有 linkedCalendars,需要更新代码
// moment.js 的 add 和 sub tract 的改变自身的行为没有被 watch 到,原因是什么呢?
this.inside__leftCalendarMonth = this.inside__leftCalendarMonth.clone().add(1, 'month');
},
clickPrevMonth() {
// TODO 如果有 linkedCalendars,需要更新代码
this.inside__leftCalendarMonth = this.inside__leftCalendarMonth.clone().subtract(1, 'month')
},
}
但是发现计算属性适合使用在 点击了 左侧快捷键 以及 点击了某个日期 作为 Start,再点一次作为 End的时候,但是不适合 clickPrevMonth 和 clickNextMonth 的时候(也就是点击第一次 作为 End,然后点击了 PrevMonth,找一个日期作为 Start。这时候 Start 就会需要更新到右边 Calendar,也就是需要通过计算属性,来更新 rightCalendarMonth),此时发现计算属性的 set 里面不知道该做什么合适了。因此使用watch 更为合适!
更合适的做法
data: () => ({
inside__leftCalendarMonth: moment(this.startDate),
}),
watch: {
inside__start (value) {
this.inside__leftCalendarMonth = value.clone();
},
}