[javascript] DateRangePicker 달력 라이브러리

날짜를 사용하는경우는 종종 datepicker를 사용하는데 기간으로 받기 위해 알아보다 DateRangePicker를 알게되어 사용하게 되었다.

 

시작일과 종료일을 받을수있고 옵션으로 시간까지 받을 수 있기때문에 선택하였다.

 

 

www.daterangepicker.com/

Date Range Picker — JavaScript Date & Time Picker Library

 

위 페이지에서 기본적인 소스를 js/css 를 참조한다.

 

1. js/css 추가

<!-- 제이쿼리 -->
<script src="/resources/assets/js/jquery-3.5.1.min.js"></script>

<!-- css -->
<link rel="stylesheet" type="text/css" href="/resources/assets/plugins/daterangepicker.css" />
<!-- js -->
<script type="text/javascript" src="/resources/assets/plugins/moment.min.js"></script>
<script type="text/javascript" src="/resources/assets/plugins/daterangepicker.min.js"></script>

 

 

2. 버튼 추가 및 DateRangePicker 실행

<button type="button" id="daterange"   class="btn blue ">등록/변경</button>


<script>
    $(document).ready(function () {
        $('selector').daterangepicker(); //실행
        $('#daterange').daterangepicker(); 
    });
</script>

 

해당코드 작상 한뒤 id="daterange" 버튼을 누르게되면 

아래와 같은 달력이 나오게된다.

기본이 영어이고 추가적으로 옵션을 추가하여 사용하기위해 옵션을 추가해준다.

 

 

3. DateRangePicker옵션추가

<button type="button" id="daterange"   class="btn blue ">등록/변경</button>
<div id="dateTime"></div>
<input type="hidden" id="sDate" name="sDate" value="" />
<input type="hidden" id="sTime" name="sTime" value="" />
<input type="hidden" id="eDate" name="eDate" value="" />
<input type="hidden" id="eTime" name="eTime" value="" />

<script>
	$(document).ready(function () {
            $('selector').daterangepicker();

            $('#daterange').daterangepicker({
                locale: {
                    "separator": " ~ ",                     // 시작일시와 종료일시 구분자
                    "format": 'YYYY-MM-DD HH:mm',     		// 일시 노출 포맷
                    "applyLabel": "확인",                    // 확인 버튼 텍스트
                    "cancelLabel": "취소",                   // 취소 버튼 텍스트
                    "daysOfWeek": ["일", "월", "화", "수", "목", "금", "토"],
                    "monthNames": ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
                },
                timePicker: true,                        // 시간 노출 여부
                showDropdowns: true,                     // 년월 수동 설정 여부
                autoApply: true,                         // 확인/취소 버튼 사용여부
                timePicker24Hour: true,                  // 24시간 노출 여부(ex> true : 23:50, false : PM 11:50)
                timePickerSeconds: false
            });

            $('#daterange').on('apply.daterangepicker', function(ev, picker) {
                var startDate = picker.startDate.format('YYYY-MM-DD'); // 시작 날짜
                var startTime = picker.startDate.format('HHmm'); // 시작 시간
                var endDate = picker.endDate.format('YYYY-MM-DD'); // 종료 날짜
                var endTime = picker.endDate.format('HHmm'); // 종료 시간

                // 시간 검증 후, 잘못된 경우 다시 창을 열어 줌
                if (startTime == "0000" || endTime == "0000") {
                    alert("시간을 확인해주세요. 00:00은 선택할 수 없습니다.");
                    picker.show(); // 선택 창을 다시 열어 줌
                    return false;
                }
                $('#dateTime').text(startDate + " " + startTime + ' - ' + endDate + " " + endTime);
                $("#sDate").val(startDate);
                $("#sTime").val(startTime);
                $("#eDate").val(endDate);
                $("#eTime").val(endTime);
            });
	});
</scrip>

해당 코드를 적용한뒤 모습이며 한글로 변경 및 시간단위까지 적용 할 수있다.

 

$('#daterange').on('apply.daterangepicker', function(ev, picker) {

이벤트를 통해 확인 버튼을 누른뒤에 동작을 제어할수있고

hidden으로 숨겨둔 곳에 시간분을 넣는 로직을 추가하였다.

 

옵션설정으로 하나의 날짜를 선택하는것도 가능하다.

$('#daterange').daterangepicker({
    singleDatePicker: true,
});

 

 

DateRangePicker도 DatePicker와 마찬가지로 당연히 함수와 이벤트들로 제어가 가능하다.

 

 

함수

Configuration

format
날짜 포맷
inline (Blooean)
달력의 display 상태 지정 / true -> container 속성을 반드시 지정해주어야함.
container (String, CSS selector || DOM Object)
달력이 표출 영역
alwaysOpen (Blooean)
달력 표출 여부 (항상)
singleDate (Blooean)
true = 달력 하나 / false(기본) = 달력 두 개
showTopBar (Blooean)
'날짜를 선택하시오' 또는 선택된 날짜 표출 영역 표출 여부
selectForward (Blooean)
첫번째 선택한 날짜 이후의 날짜를 두번째 날짜로 선택 가능 여부
selectBackward (Blooean)
첫번째 선택한 날짜 이전의 날짜를 두번째 날짜로 선택 가능 여부
startDate (String or false)
달력에서 선택 가능한 날짜의 시작 날짜
오늘로 설정하고자 하면 startDate: new Date()

 

 

API

$(dom).data('dataRangePicker')
.setDateRange('2023-01-20', '2023-01-22')
날짜 영역을 설정한다.

.setStart('2023-01-07')
첫번째 날짜를 설정한다.

.setEnd('2023-01-09')
두번째 날짜를 설정한다.

.clear()
달력 날짜 설정을 초기화한다.

 

등 이 있다.