기본 콘텐츠로 건너뛰기

달력 플러그인 ( flatpickr.js ) 사용 시 시작일, 종료일 지정하기 - javascript

달력 플러그인( flatpickr.js )에서 자동으로 시작일, 종료일 지정하기


html

<input type="text" class="input_cal trans calStr" placeholder="시작일" readonly v-model="cal.sdate">
<input type="text" class="input_cal trans calEnd" placeholder="종료일" readonly v-model="cal.edate">

js

let cals = flatpickr(".calStr", {
  onChange: function(selectDates, dateStr, instance) {
    cal.sdate = dateStr;
    cale.set("minDate", cal.sdate);
  }
});
let cale = flatpickr(".calEnd", {
  onChange: function(selectDates, dateStr, instance) {
    cal.edate = dateStr;
    cals.set("maxDate", cal.edate);
  }
});

날짜가 변경되면 set(option, value)을 이용해서 다른 달력의 옵션을 설정할 수 있다


끝.