[Vuejs] vuejs-datepicker 사용하기

https://www.npmjs.com/package/vuejs-datepicker

vuejs-datepicker

 

프로젝트에서 datepicker를 사용해야해서 찾아보다가 vuejs-datepicker를 골랐다. 이유는 가장 심플하고, 연도와 월 이동하는 것도 디자인이 예뻤기 때문이다. 그러나 활용할 때에 시행착오를 많이 겪었어서 내게 필요했던 사용 방법을 기록한다.

 

1. input-class 적용 안될 때

나는 input-class만 건드렸지만, 위 세 가지 모두에 해당한다. DatePicker를 까보면, 여러 div 안에 input이 있는 걸 확인할 수 있다. DatePicker에 class를 부여하면 가장 바깥 div에만 style이 적용되므로, 내부 구조에 영향을 주기 위해서는 위 props를 사용해야 한다. 이 때 주의할 점은

여기에 class를 정의하면 작동하지 않는다! ( `-´ ) 검색해보니 이 문제로 고통받는 사람들이 많더라. 하단에 그냥 style을 따로 만들어주어야 작동하는 것을 확인할 수 있었다. scoped를 떼고 그냥 style로 적용해야 한다!! 

 

 

2. openDate : duplicate key 에러

 

사실 openDate는 작동을 하지 않는 건 아니었다. 대신 콘솔창에 50개 오류를 찍어냈는데, v-for를 돌릴 때 key가 없다는 에러였다! vuejs-datepicker 깃헙에서 찾아보니 openDate를 Date 타입으로 바꾸어주는 코드가 있었는데

마치 이것처럼  (https://github.com/charliekassel/vuejs-datepicker/blob/master/src/components/Datepicker.vue)

이 부분에서 에러가 난 것 같았다. data로 값을 주지 않고, new Date(2022, 4,16)로 돌리면 괜찮았기 때문이다. 이것저것 시도해보니 seasonShow.startDate 값이 호출되기 전에 페이지가 랜딩되며 없는 값이 props로 들어갔고, 그 때문에 난 에러인 것을 알 수 있었다. 이를 해결하기 위해서 v-if문을 추가했다.

 

startDate 값이 존재하지 않으면 아예 랜딩되지 않게 하였더니 콘솔창 에러를 없앨 수 있었다.