[vuejs] daterangepicker 새로고침 해야 나오는 현상, 페이지 이동시 작동 안됨 오류

common.js에 DataRangePicker에 대한 옵션이 적용되어있으나

해당페이지에서는 작동하지 않고, 새로고침해야 작동되는 오류가 있음, 

 

원인은 js파일을 로드하지 못하는것으로  추측되는데, mounted에 DataRangePicker를 로드하도록 했지만 

Uncaught TypeError: $(...).datepicker is not a function 오류가 발생

 

해결방법

daterangepicker npm 설치 후 전역에서 사용 할 수 있도록 별도 처리

 

1. common.js

기존 데이트픽커 init 부분을 vue로 가지고 오고  중복되지 않게 주석처리

**** vue mounted로 이동, 주석처리함
$(function() {

 var start = moment().subtract(29, 'days');
 var end = moment();

 $('.datepicker').daterangepicker({
    startDate: start,
    endDate: end,
    showDropdowns: true,
      locale: {
     "separator": " ~ ",                    
     "format": 'YYYY.MM.DD',    
     "applyLabel": "확인",            
     "cancelLabel": "취소",           
     },
 });

});

 

2. daterangepicker install

npm install vue-daterangepicker --save

 

3. main.js

vue에서 daterangepicker 전역 import

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
require("daterangepicker");

 

4. 별도로 커스텀된 daterangepicker.js 파일이 있다면, 사용할 vue 영역에 import 함

<script>
import '@/assets/js/daterangepicker.js';
</script>

** eslint를 사용한다면 import시 오류가 발생함
daterangepicker.js에 최상단에 /* eslint-disable */ 추가해서 오류 발생하지 않게 처리

 

오류발생시 /* eslint-disable */ 추가

 

 

5. vue mounted에 daterangepicker 로드

 <div class="datepicker" data-adte-format="yyyy.mm.dd" ref="datepicker">
 <span
    class="cm-input white-input w-240 h-40"
    name="date"
    data-bind="daterangepicker: dateRange"
  ></span>
//생략


 mounted() {
    this.$nextTick(() => {
    var start = moment().subtract(29, 'days');
    var end = moment();

    this.$refs.datepicker.querySelector("span").innerHTML = start.format('YYYY.MM.DD') + ' - ' + end.format('YYYY.MM.DD');

    $(this.$refs.datepicker).daterangepicker(
      {
        dateFormat: "yy-mm-dd",
        startDate: start,
        endDate: end,
        showDropdowns: true,
        locale: {
          "separator": " ~ ",
          "format": 'YYYY.MM.DD',
          "applyLabel": "확인",
          "cancelLabel": "취소",
          "daysOfWeek": ["일", "월", "화", "수", "목", "금", "토"],
          "monthNames": ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
        },
      },
      function (start, end) {
        this.$refs.datepicker.querySelector("span").innerHTML = start.format("YYYY.MM.DD") + " - " + end.format("YYYY.MM.DD");
      }.bind(this)
    );

  });
  },