[Vue.js] flatpickr

watch로 계속 객체를 바라보고 있어서 달력을 체크할때마다 유효성 체크를 하게 되어 문제가 있었다.

watch 자체를 수정하고자 했지만, 근본적인 문제를 해결할 수가 없었다.

이에 따라 created 안에 선언되어 있는 flactpickr 메소드 내부에 유효성 체크를 하게 하여 해결하였다.

 

<tr>
<th><span class="important"></span></th>
<td>
<div class="datepickr">
<input type="text" class="flatpickr flatpickr-input startDate flatpickr-date" v-model="form.reservationStartDate">
<input type="text" class="flatpickr flatpickr-f flatpickr-input-button" readonly>
<span class="mark">~</span>
<input type="text" class="flatpickr flatpickr-input endDate flatpickr-date" v-model="form.reservationEndDate">
<input type="text" class="flatpickr flatpickr-t flatpickr-input-button" readonly>
</div>
</td>
</tr>

 

이전 코드 

watch : {
    'form.startDate': function () {
        const that = this;
            if ((that.form.startDate != '') && (that.form.endDate != '')) {
                if (that.form.startDate >= that.form.endDate) {
                alert("종료 날짜보다 과거 시점으로 선택해 주세요.");
                return;
            }
        }
	},
    'form.endDate': function () {
        const that = this;
        if ((that.form.endDate != '') && (that.form.startDate != '')) {
                if (that.form.endDate <= that.form.startDate) {
                alert("시작 날짜보다 미래 시점으로 선택해 주세요.");
                return;
            }
        }
    }
}

 

 

flatpickr(".flatpickr-input-button", {
    dateFormat: "Y-m-d H:i",
    minDate: new Date(),
    enableTime: true,
    locale: "ko",
    onOpen: function (obj, date, instance) {
        let flatpickr = document.querySelectorAll('.flatpickr-date');
        if (instance.input.classList.contains('flatpickr-f')) {
            instance.setDate(flatpickr[0].value, true);
        } else if (instance.input.classList.contains('flatpickr-t')) {
        	instance.setDate(flatpickr[1].value, true);
        }
    },
    onChange: function (obj, date, instance) {
        let flatpickr = document.querySelectorAll('.flatpickr-date');
        if (instance.input.classList.contains('flatpickr-f')) {
        flatpickr[0].value = date;
        that.form.startDate = date;

        if ((that.form.startDate != '') && (that.form.endDate != '')) {
            if (that.form.startDate >= that.form.endDate) {
                alert("종료 날짜보다 과거 시점으로 선택해 주세요.");
                flatpickr[0].value = null;
                that.form.startDate = null;
                return;
            }
        }

        } else if (instance.input.classList.contains('flatpickr-t')) {
        flatpickr[1].value = date;
        that.form.endDate = date;

        if ((that.form.endDate != '') && (that.form.startDate != '')) {
            if (that.form.endDate <= that.form.startDate) {
                alert("시작 날짜보다 미래 시점으로 선택해 주세요.");
                flatpickr[1].value = null;
                that.form.endDate = null;
                return;
                }
            }
        }
    instance._input.value = '';
    },
});