[ VueJs Datepicker ] datepicker 이벤트 관련 문제

vuejs Datepicker 사용 시, IOS 15+ 모바일 환경에서 발생한 문제에 대해 공유하고자 한다.

작업 중인 애플리케이션 내에서 vuejs datepicker 를 사용하고 있는데 해당 datepicker 에는 이벤트가 다음과 같이 선언되어 있다.

<vuejs-datepicker v-model="params.startDate"
	:format="$data._datepicker.format"
	:language="_getDatepickerLanguage()"
	:disabled-dates="disabledDatesFrom"
	@input="params.startDate = _formatedDatepicker($event)"
	@selected="updateDDT">
</vuejs-datepicker>

 

@input 은 datepicker에서 날짜를 선택 시, yyyy.mm.dd 형식으로 변환하여 model 에 값을 넣어주는 이벤트이다.

@selected 는 datepicker에서 날짜를 선택하면, 자동적으로 다음 datepicker에 disabled 옵션을 걸어주는 역할을 하는 이벤트 이다.

여기서 발생한 첫번째 문제는 아래의 링크 내용 처럼 ios date 가 문제가 되면서 발생한다.

https://lucete-stellae.tistory.com/72

[ IOS ] invalid Date 관련 문제

 

vuejs datepicker github을 보면 https://github.com/charliekassel/vuejs-datepicker#readme

GitHub - charliekassel/vuejs-datepicker: A simple Vue.js datepicker component. Supports disabling of dates, inline mode, transla

 

사용방법에 아래와같이 나와있다.

USAGE 

<script>
var state = {
  date: new Date(2016, 9,  16)
}
</script>
<datepicker :value="state.date"></datepicker>

 

즉, 사용 시에 변수 초기화는 date 객체로 하라는 뜻이다. 그러나, 애플리케이션에서는 datepicker에 문자열로 된 모델을 통해 값을 초기화 하거나 바꾸고 있었고, 이 부분에서 전부 invalid date가 떨어져 오류가 발생하고 있었다.

따라서, datepicker 사용 시에 변수는 항상 javascript date를 통해 초기화하거나 수정하였다.

 

두번째 문제는 model 에서 발생했다.

<vuejs-datepicker v-model="params.startDate"
	:format="$data._datepicker.format"
	:language="_getDatepickerLanguage()"
	:disabled-dates="disabledDatesFrom"
	@input="params.startDate = _formatedDatepicker($event)"
	@selected="updateDDT">
</vuejs-datepicker>

 

다시, vuejs datepicker 선언부를 살펴보면 model 옵션이 사용된 것을 알 수 있다. v-model 옵션은 vuejs 를 사용하는 많은 이유 중 값이 동적으로 변경되더라도 렌더링 되는 페이지에서 변경되기 위해 사용하는 옵션이다. 

그리고 datepicker 는 사용 시, input 요소를 통해 선택된 날짜를 보여주게 되어있기 때문에 model을 요소에 바인딩 하는 경우 해당 model 의 값을 보여주고 있다.

 

이 경우에, datepicker 에서 날짜를 선택하면 @input 이벤트가 실행되어 v-model의 값에 변화를 주어야 하는데 첫번째로 선택하면 v-model에 변화가 없고, 한번 더 선택해야 실제 v-model의 값에 값을 할당한다는 것이다.

확인해본 결과, input 이벤트에서 실행되는 _formatedDatepicker는 다음과 같았다.

_formatedDatepicker: function (date, format) {
	if (util.isEmpty(date)) return "";
	var f = 'YYYY.MM.DD';
	if (format) {
		if (format == 'time') f = 'HH:MM';
		else f = format;
	}
	return moment(date).format(f);
},

 

IOS date문제와 엮여서 그런 줄 알았으나 의외로 이 부분은 문제가 없었다. 문제는 

v-model 과 @input 에서 같은 model 을 사용하는 경우 무슨이유에선 지 model 변수 쪽으로 @input에서 바인딩한 결과가 전달이 안된다는 것이다.

예로 저 부분에서 v-model을 지우고 테스트 해본 결과 정상적으로 datepicker 에서 선택한 날짜 값이 한번에 바인딩 되었다. v-model만 선언하면 두번 선택해야 값이 전달되는 현상이 발생한 것이다.

 

vuejs datepicker 문서 내에 event 항목을 보면, input value가 변경되면 input 이벤트를 발생을 시키는데

input

Date|null

Input value has been modified

 

여기서 발생하는 이벤트가 v-model 값 변경 이벤트까지 바로 전달이 안되는 듯 했다. 뭔가 중간에 끊기거나 해서 첫번째 선택한 값이 두번째 선택할 때 v-model 쪽으로 전달이 되는 것으로 예상했다. 

<vuejs-datepicker v-model="datepicker.from" // 다른 변수 선언
	:format="$data._datepicker.format"
	:language="_getDatepickerLanguage()"
	:disabled-dates="disabledDatesFrom"
	@input="params.startDate = _formatedDatepicker($event)" // v-model과는 다른 변수 사용
	@selected="updateDDT">
</vuejs-datepicker>

 

더 파볼 수는 없었기 때문에 여기서 고민은 접고 결국 초기화 객체를 하나 더 만들어 사용하는 방법으로 해결했다. back 단에서 초기값을 가져오기 때문에 이를 임시 변수에 세팅하고, 데이터 조회 시 원래 model에 있던 값에 해당 데이터를 옮겨서 조회하도록 했다.