[Daterangepicker] 달력 라이브러리 Daterangepicker 예제

Daterangepicker는 달력을 이용해 날짜를 선택할 수 있게 해주는 라이브러리입니다. 이걸 사용하면 일일히 날짜를 입력하지 않아도 편리하게 날짜를 선택할 수 있습니다.

 

https://www.daterangepicker.com/

Date Range Picker — JavaScript Date & Time Picker Library

공식 사이트에서 많은 걸 확인할 수 있습니다. 제가 사용했던 간단한 예제들을 올려보겠습니다.

 

우선 Daterangepicker를 사용하기 위해 필요한 cdn 파일입니다.

<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" />

4가지 파일을 연결시켜 주었다면 daterangepicker를 사용하기 위한 모든 준비가 끝났습니다😊

 

index.html 파일에 input 태그를 넣어줍니다.

<input type="text" name="dateRangePicker" id="dateRangePicker"/>

script.js 파일에서 여러 속성들을 지정할 수 있습니다.

//날짜만 나오는 picker

$('#DateRangePicker').daterangepicker({ 
    singleDatePicker: true,
    showDropdowns: true,
    minYear: 2020,
    maxYear: 2022,
    autoApply: true,
    locale: {
        applyLabel: "확인",
        cancelLabel: "취소",
        daysOfWeek: ["일", "월", "화", "수", "목", "금", "토"],
        monthNames: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
        format: 'YYYY-MM-DD'
    }
});

 

결과

 

//날짜+시간

$('#DateRangePicker').daterangepicker({ 
    singleDatePicker: true,
    showDropdowns: true,
    minYear: 2020,
    maxYear: 2022,
    autoApply: true,
    timePicker: true, //시간 속성 추가
    timePicker24Hour: true, //1pm or 13pm
    locale: {
        applyLabel: "확인",
        cancelLabel: "취소",
        daysOfWeek: ["일", "월", "화", "수", "목", "금", "토"],
        monthNames: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
        format: 'YYYY-MM-DD hh:mm'
    }
});

결과

//범위 지정

$("#daterangepicker").daterangepicker({
    singleDatePicker: false,
    autoApply: true,
    locale :{ 
        format: 'YYYY-MM-DD',
        separator: ' ~ ',
        applyLabel: "적용",
        cancelLabel: "닫기"
    }
});

결과 

 

정말 간단하게 달력 라이브러리를 사용할 수 있습니다!