How to make calendar-range months always adjacent?

[IgorShayderov]

Hello. I'm trying to make calendar-range's months adjacent. Whenever user picked date or navigated to next month using buttons, months should be adjacent. Like this:

(October, November)

This is my code:

import DatePicker from 'vue2-datepicker';

const { updateCalendars } = DatePicker.CalendarRange.methods;

DatePicker.CalendarRange.methods.updateCalendars = function (
  calendars,
  adjustIndex = 1
) {
  const [newStartDate, newEndDate] = calendars;
  const [oldStartDate, oldEndDate] = this.calendars;

  if (this.calendars.length === 0 || newStartDate !== oldStartDate) {
    const newStartDateMonth = newStartDate.getMonth();
    const newStartDateYear = newStartDate.getFullYear();
    const nextDate = new Date(newStartDateYear, newStartDateMonth + 1);

    this.calendars[0] = newStartDate;
    this.calendars[1] = nextDate;
  } else if (newEndDate !== oldEndDate) {
    const newEndDateMonth = newEndDate.getMonth();
    const newEndDateYear = newEndDate.getFullYear();
    const previousDate = new Date(newEndDateYear, newEndDateMonth - 1);

    this.calendars[0] = previousDate;
    this.calendars[1] = newEndDate;
  }
};

When I look at this.calendars I see that everything is perfect, but in real one side of calendar every time don't updating. I have tried $forceUpdate() but it doesn't work.

[mengxiong10]

It's a problem for vue2 https://vuejs.org/v2/guide/reactivity.html#For-Arrays.

    // fix it
    // this.calendars[0] = newStartDate;
    // this.calendars[1] = nextDate;
    this.calendars = [newStartDate, nextDate]

[IgorShayderov]

@mengxiong10 Thank you very much! It works.