[ vue ] Date Picker 시작날짜 끝날짜 선택시 고정

---

🖤 글이 도움이 되었다면 유튜브 클릭 해주세요 🖤
https://www.youtube.com/channel/UCgkxlLdjrlsFyp2GGxzY59A

디벨빈수

---

Date Picker 사용

 

요구사항 1

 

기존에는 시작  ~ 끝 날짜가 1달 차이로 움직였지만

수정 사항은 시작날과 마지막날을 선택 할 때 같은 picker 를 사용해야 하지만 각 위젯을 분리되어 날짜가 움직여야 한다

 

---

vue datepicker 다운

 

 npm install vue2-datepicker --save

---

vue Code

 

<template>
  <div class="box">
    <section>
      <p>date range</p>
      <date-picker v-model="value1" type="date" range placeholder="Select date range"></date-picker>
    </section>
  </div>
</template>

<script>
  import DatePicker from 'vue2-datepicker';
  import 'vue2-datepicker/index.css';

  export default {
    components: { DatePicker },
    data() {
      return {
        value1: [new Date(2019, 9, 8), new Date(2019, 9, 19)],
        value2: [],
      };
    },
  };
</script>

---

• 참고 사이트 1
• 참고 사이트 2

---