[日期选择器] calendar-的月份-与-选择日期之间的关系

57 阅读1分钟

思路

当传入 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();
  },
}