javascript 달력(캘린더) 라이브러리 / daterangepicker / 설치 및 활용

 

다양한 형식으로 날짜를 표현할 수 있는 강력한 무료 라이브러리입니다. 이번 프로젝트에서 CSS라이브러리인 bootstrap과 잘어울리는 디자인이라서 무난하게 사용할 수 있었습니다. 사용하면서 느낀점과 장단점도 함께 설명드리겠습니다.

 

 

 

---

 

 

공식홈페이지

공식사이트

http://www.daterangepicker.com/

Date Range Picker — JavaScript Date & Time Picker Library

공식 홈페이지를 살펴보면, 사용법과 예제들이 나와 있습니다. 모두 영어로 구성되어 있어 사용하시기 불편하실 수도 있기에, 공식 사이트에 기재된 기능과 옵션에 대해 간단히 설명드리겠습니다.

 

 

HTML 설정

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

위의 소스를 그대로 넣어주시면 됩니다. (여기에 포함된 moment.js는, 날짜 계산에 사용하면 꿀입니다.! 또한 CDN을 사용 못하시는 경우에는, 저 링크에서 소스를 그대로 다운받아 프로젝트에 넣으셔도 무방합니다~)

 

 

 

 

간단한 설정

이 라이브의 특장점으로, 사이트에서 Configuration Generator 로 옵션 생성을 간편히 할 수 있다는 것입니다. 설정 옵션들을 선택해주면, Your Configuration to Copy 영역에 자동으로 설정값이 생성됩니다. 홈페이지에 옵션들에 대한 설명이 나와있지만, 간략하게 설명해보겠습니다.

 

옵션	설명
startDate	시작일자
endDate	종료일자
minDate	최소 날짜
maxDate	최대 날짜
minYear	최소 년도 (사용자의 이상값을 방지할 수 있다. 이상값 예시 "0001-01-01")
maxYear	최대 년도 (사용자의 이상값을 방지할 수 있다. 이상값 예시 "10000-01-01")
timePicker	시간 설정 여부
timePickerSeconds	시분초 설정여부 (timePicker true 설정 필요)
timePicker24Hour	24시각제 표시여부 (timePicker true 설정 필요)
ranges	범위 지정 가능 (일주일, 전월, 당월 등등)
drops	input 기준으로 상단,하단,자동으로 캘린더 위치를 설정할 수 있음
locale	다국어 지원
singleDatePicker	단일 날짜 선택
isInvalidDate	유효한 날짜값인지 검증하는 함수 설정가능

 

 

 

 

다국어 지원

locale 옵션을 사용하여 다국어 지원이 가능하며, 월이나 요일을 원하는 텍스트로 표시할 수 있습니다.

기본값

한국어 커스터 마이징

$('#demo').daterangepicker({     "minYear": 1000,     "maxYear": 9999,     "locale": {         "format": "MM/DD/YYYY",         "separator": " - ",         "applyLabel": "Apply",         "cancelLabel": "Cancel",         "fromLabel": "From",         "toLabel": "To",         "customRangeLabel": "Custom",         "weekLabel": "W",         "daysOfWeek": [             "Su",             "Mo",             "Tu",             "We",             "Th",             "Fr",             "Sa"         ],         "monthNames": [             "January",             "February",             "March",             "April",             "May",             "June",             "July",             "August",             "September",             "October",             "November",             "December"         ],         "firstDay": 1     }, }, function(start, end, label) {   console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')'); });

$('#demo').daterangepicker({     "minYear": 1000,     "maxYear": 9999,     "locale": {        "format": 'YYYY-MM-DD',        "separator": " ~ ",        "applyLabel": "확인",         "cancelLabel": "취소",         "fromLabel": "From",         "toLabel": "To",         "customRangeLabel": "Custom",         "weekLabel": "주",         "daysOfWeek": [              "일",              "월",              "화",              "수",              "목",              "금",              "토"        ],       "monthNames": [              "1월",              "2월",              "3월",              "4월",              "5월",              "6월",              "7월",              "8월",              "9월",              "10월",              "11월",              "12월"         ],         "firstDay": 1     }, }, function(start, end, label) {   console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')'); });

 

 

 

 

 

 

값 범위 지정

왼쪽사진은 날짜값 범위를 사용자가 직접 선택할 수 있는 달력입니다. ranges 옵션을 설정하면, 가운데와 오른쪽 이미지처럼 어제, 최근 7일, 최근 1달과 같은 옵션들을 지정할 수 있어 사용자가 빠르고 간편하게 기간설정을 할 수 있습니다.

 

예시)

$('#demo').daterangepicker({
     [... 설정값들],
     ranges: {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    },
    "alwaysShowCalendars": true,	//이것을 넣으면 오른쪽이미지, 없애면 가운데 이미지 처럼 표시됨
});

 

 

 

 

 

 

 

단일 날짜 설정 캘린더

기간 설정뿐만아니라 단일 날짜 설정도 가능합니다. "input[type=date]"로 설정할 수 없는 시,분까지 설정할 수 있어서 이번 프로젝트에서 유용하게 사용했습니다.

 

예시)

$('#demo').daterangepicker({
    [...설정값들]
    "singleDatePicker": true,
    "timePicker": true,
    "timePicker24Hour": true,
}, function(start, end, label) {
  console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});

 

 

 

 

 

단점

날짜 값 삭제

이 라이브러를 선택하실 때, 고려해줄 사항이 하나 있습니다. 이 라이브러리는 날짜값을 삭제하는 기능이 없습니다. Cancel버튼을 누르면, 달력 모달이 닫히는데요, 이 버튼을 "삭제" 버튼으로 텍스트를 변경하고, 날짜값을 초기화하는 기능을 넣어 커스터마이징 해보겠습니다.

 

예시)

$('#demo').daterangepicker({
    [... 설정값들]
    "cancelLabel": "삭제",
}).on('cancel.daterangepicker', function(ev, picker) {
  $(ev.currentTarget).val('');
});

위의 소스코드처럼 적용하면, 달력에 표시된 텍스트 값을 제거할 수 있습니다.

 

 

 

옵션 변경의 어려움

옵션을 변경할 때마다 캘린더를 생성할 때와 동일하게 설정해주어야 한다.

 

예를들어 1번캘린더와 2번캘린더를 따로두고, 1번캘린더가 2번캘린더보다 항상 앞의 날짜가 선택될 수 있게 하기 위해서  값이 변경될 때마다 서로 날짜의 min, max값을 변경해주어야 했다. 캘린더를 다시 달아 날짜값을 셋팅해주어야 했는데, 함수로 간편히 설정할 수 없어서 값 변경될때마다 캘린더 생성을 계속 해주었다.

 

 

invalid date

날짜값을 공백으로 설정하면 invalid date가 표시된다. 이것때문에 날짜값이 공백인지 여부를 체크해서 startDate, endDate를 지정해주었다. 개발이 끝나고나서 "isInvalidDate" 옵션을 알게되었는데, 유효한 날짜인지 체크하는 함수를 true false로 리턴할 수 있도록 해주면 된다고 한다. 혹시나 이 글을 보고 사용하시는 분이 있다면 이 함수를 이용해보시길!!

 

 

 

 

 

---

 

 

 

캘린더의 장점 단점에 대해서 설명드렸는데요, 도움이 되셨으면 좋겠습니다. 감사합니다^^