Vue3 DatePicker 넣는 방법

DatePicker기능을 구현하려면 약간 복잡한데, Vue3에서 패키지를 이용한 설치방법은 

매우 간단하다. 

 

이유는 Vue3 DatePicker 패키지가 있어서 설치가 용이하기 때문이다. 

아래와 같은 기능이 필요한경우 ... 

 

필요한 npm 

https://www.npmjs.com/package/vue3-datepicker

vue3-datepicker

 

 

패키지 설치

npm i vue3-datepicker

 

html 코드 

<Datepicker v-model="start_date" class="date-picker" />
~
<Datepicker v-model="end_date" class="date-picker" />

 

script 코드 

import Datepicker from "vue3-datepicker";

export default {
  mixins: [],
  data() {
    return {
      start_date: new Date(),
      end_date: this.After7days(),
    };
  },
  components: {
    Datepicker,
  },
  methods: {
    After7days() {
      const d = new Date();
      d.setDate(d.getDate() + 7);
      return d;
    },
  },
};