[Vue] vue VCalendar에서 v-model 변경 시 특정 날짜로 datepicker 이동 시키기

 

VCalendar 이전날짜 자동 focus 기능 구현하기

datepick에서 이번에 신규로 개발한 기능은

기존 날짜를 선택하면 이전기간과 비교해서 보여주는 datepicker를 개발 중이었다.

 

이전기간이 변경이 되면,

비교 기간이 자동으로 v-model에 연동되어서 변경이 되는데

아쉬운 점이 연결된 데이터는 변경이 되었는데

datepicker에서는 표시가 안 되는 문제가 발생했다.🤷‍♀️ 

 

오늘은 v-model로 연결된 데이터가 변경되면,

해당 날짜로 datepicker를 focus 시키는 기능을 찾아보기로 했다!

 

 

---

VCalendar

VCalendar는 vue에서 range를 선택하기에 최적화되어있는 datepicker로,

현재 range를 선택할 때 내가 사용하고 있는 datepicker라이브러리이다.

https://vcalendar.io/

Welcome | VCalendar

 

 

VCalendar move Methods 이용하기

methods vCalendar

먼저, 찾아보니 move라는 Methods를 이용하면 target 날짜로 이동이 가능한 function을 제공하고 있는 걸 확인!

 

sample Code

<template>
  <div>
    <v-date-picker
      ref="date"
      :value="date"
      @input="updateSearchParamsDate"
      is-range
    />
    <v-date-picker
      ref="compareDatepicker"
      :value="compareDate"
      is-range
    />
  </div>
</template>
<script>
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration'; //dayjs 기간 계산을위해 추가
dayjs.extend(duration);

  export default {
    data() {1
      return {
        date: {
          start: null,
          end: null
        },
        compareDate: {
          start: null,
          end: null
        },
      }
    },
    methods: {
      updateSearchParamsDate(value) {
        //datepicker에서 선택된 date 세팅
        this.date.start = dayjs(value.start).format("YYYY-MM-DD");
        this.date.end = dayjs(value.end).format("YYYY-MM-DD");

        //date 기간 만큼 이전기간 설정하기
        const dateDifference = dayjs.duration(dayjs(this.date.end).diff(dayjs(this.date.start))).asDays();
        let end = dayjs(this.date.start).subtract(1, 'days').format("YYYY-MM-DD");
        let start = dayjs(end).subtract(dateDifference, 'days').format("YYYY-MM-DD");
        this.compareDate = {start, end};

        //설정된 기간으로 datepicker 이동
        this.$refs.compareDatepicker.move(this.compareDate.end);
      },
    }
  }
</script>

 

date라는 datepicker에서 데이터가 변경이 되면,

compareDatepicker에서 해당 기간만큼 이전 기간이 자동으로 선택되게 했다.

그 이후에 이전 기간이 만약에 다른 연, 월 일 경우 해당 위치로 datepicker 포커스를 이동시키는 코드이다.

 

this.$refs.compareDatepicker.move(this.compareDate.end);

위 코드를 이용하면 특정날짜로 datepicker를 이동할 수 있다.

 

 

 

👨‍🦰위 코드 결과화면

datepicker 선택하는 화면

move function을 이용해 주니 이제 비교하는 차트가 알아서 그전 데이터로 이동하는 것까지 볼 수 있게 되었다!

편안- 하다