라이브러리

datepicker

http://www.daterangepicker.com/

html

<input type="text" class="js-datepicker" autocomplete="off" title="날짜 입력">
<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" />

script

function datePicker() {
    $(".js-datepicker").daterangepicker({
        locale: {
            format: "YYYY-MM-DD",
            daysOfWeek: ["일","월","화","수","목","금","토"],
            monthNames: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],
            cancelLabel: "취소", // autoApply: false 일 경우 취소 텍스트 설정
            applyLabel: "확인", // autoApply: false 일 경우 확인 텍스트 설정
        },
        autoApply: true, // 자동 적용 여부 설정
        singleDatePicker:true, // 단일 달력 설정
        minDate: "2021-10-10", // 선택할 수 있는 최소 날짜 설정
        maxDate: "2022-02-10", // 선택할 수 있는 최대 날짜 설정
    });
}

$(function() {
    datePicker();

    /*
        $(".js-datepicker").data("daterangepicker").setStartDate("2021-11-11"); // 시작날짜를 해당 날짜로 업데이트
        $(".js-datepicker").data("daterangepicker").setEndDate("2021-11-11"); // 종료 날짜를 해당 날짜로 업데이트

        // datepicker 노출될 때 이벤트 설정
        $(".js-datepicker").on("show.daterangepicker", function(ev, picker) {
            console.log(picker);
        });

        // datepicker 사라질 때 이벤트 설정
        $(".js-datepicker").on("hide.daterangepicker", function(ev, picker) {
            console.log(picker);
        });

        // 날짜 적용될 때 이벤트 설정
        $(".js-datepicker").on("hide.daterangepicker", function(ev, picker) {
            console.log(picker);
        });
    */
});

daterangepicker

http://www.daterangepicker.com/

html

<input type="text" class="js-daterangepicker" autocomplete="off" title="기간 입력">
<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" />

script

function dateRangePicker() {
    $(".js-daterangepicker").daterangepicker({
        locale: {
            format: "YYYY-MM-DD",
            separator: "~", // 기간 사이에 구분자 설정
            daysOfWeek: ["일","월","화","수","목","금","토"],
            monthNames: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],
            cancelLabel: "취소", // autoApply: false 일 경우 취소 텍스트 설정
            applyLabel: "확인", // autoApply: false 일 경우 확인 텍스트 설정
        },
        autoApply: true, // 자동 적용 여부 설정
        singleDatePicker:false, // 단일 달력 설정
        linkedCalendars:true, // 두 개의 캘린더를 항상 연속된 달로 설정할 것인지 여부
        minDate: "2021-10-10", // 선택할 수 있는 최소 날짜 설정
        maxDate: "2022-02-10", // 선택할 수 있는 최대 날짜 설정
    });
}

$(function() {
    dateRangePicker();

    /*
        $(".js-datepicker").data("daterangepicker").setStartDate("2021-11-11"); // 시작날짜를 해당 날짜로 업데이트
        $(".js-datepicker").data("daterangepicker").setEndDate("2021-11-11"); // 종료 날짜를 해당 날짜로 업데이트

        // datepicker 노출될 때 이벤트 설정
        $(".js-datepicker").on("show.daterangepicker", function(ev, picker) {
            console.log(picker);
        });

        // datepicker 사라질 때 이벤트 설정
        $(".js-datepicker").on("hide.daterangepicker", function(ev, picker) {
            console.log(picker);
        });

        // 날짜 적용될 때 이벤트 설정
        $(".js-datepicker").on("hide.daterangepicker", function(ev, picker) {
            console.log(picker);
        });
     */
});