설치 innologica.github.io/vue2-daterange-picker/#installation :무사히 완료
npm i vue2-daterange-picker --save
or
yarn add vue2-daterange-picker
가장 기본 용법인 이건 된다.
import DateRangePicker from 'vue2-daterange-picker'
import 'vue2-daterange-picker/dist/vue2-daterange-picker.css'
Vue.component('DateRangePicker', DateRangePicker)
<template>
<date-range-picker
v-model="daterange"
:locale-data="{
direction: 'ltr',
firstDay: 0,
format: 'yyyy-mm-dd',
separator: ' - ',
applyLabel: '확인',
cancelLabel: '취소',
weekLabel: '주',
customRangeLabel: '기간',
daysOfWeek: ['일', '월', '화', '수', '목', '금', '토'],
monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
}"
/>
</template>
<script>
import DateRangePicker from 'vue2-daterange-picker'
</script>
근데, 나는 props의 디폴트 값이 마음에 들지 않았다.
그리고 혼자 오해를 했다. 용법 innologica.github.io/vue2-daterange-picker/#usage : Register the component 이걸 하면 default props를 overriding 해줄거라고
내 잘못이 맞긴 한데 내가 파악한 구조상으로는 default props를 설정하려면 DateRangePicker.vue를 새로 만들던가 해야 할 것 같다. 기존 거 고쳐봤자 업데이트하면 날라갈 것 같으니 말이다.
그리고 매뉴얼이 진짜 불친절하다 props이름이랑 밑에 설명이랑 매칭이 바로 바로 안되서 일일히 _넣어서 확인해봐야했다.
시간도 버렸고 안 쓰기로 했지만 또 언젠가 쓰게 될지도 모르니까 오늘 정리한 것은 기록으로 남겨두겠다.
node_modules\vue2-daterange-picker\dist\vue2-daterange-picker.css에서 나는 문제가 있어서 수정한 부분은 아래와 같다.
// original
.daterangepicker.openscenter[data-v-7d8c7845]{
...
left:50%;
...
}
// modify
.daterangepicker.openscenter[data-v-7d8c7845]{
...
left:100%;
...
}
매뉴얼 중 props 관련하여 이름순 말고 관련있는 설정끼리 묶어봤다.
:minDate [String, Date],
:maxDate [String, Date],
:localeData Object,
:dateRange [Object],
:dateFormat Function,
:disabled Boolean,
:readonly Boolean,
:controlContainerClass [Object, String],
:ranges [Object, Boolean],
:opens String,
:showWeekNumbers Boolean,
:showDropdowns Boolean,
:alwaysShowCalendars Boolean,
:singleDatePicker [Boolean, String],
:timePicker Boolean,
:timePickerIncrement Number,
:timePicker24Hour Boolean,
:timePickerSeconds Boolean,
:appendToBody Boolean,
:calculatePosition Function,
:linkedCalendars Boolean,
:autoApply Boolean,
:closeOnEsc Boolean,
여기까지만 봐서 정리도 여기까지만 한다.