[Jquery] 기간 설정 가능한 Datepicker 사용법

기간 설정 가능한 Datepicker

서비스 개발을 하다 보면 Datepicker를 활용해서 기간을 설정 할 수 있도록 하는 기능이 필요할 때가 있다.

Jquery 를 활용하여 아래와 같이 구현 할 수 있다.

 

1) .css, .js 파일 설정

나는 Django를 사용하느라 아래처럼 설정하였고 본인 환경에 맞게 셋팅 하면 됨

<link rel="stylesheet" href="{% static 'jquery-ui-1.12.1/jquery-ui.min.css' %}"/>
<script src="{% static 'jquery-ui-1.12.1/jquery-ui.min.js' %}"></script>

 

2)HTML 작성

<table class="table table-hover table-sm" style="width:500px;">       
<tr style="border-top:none;">
<td  style="vertical-align:middle;border-top:none;"> <strong>기간검색</strong></td>

<td  style="vertical-align:middle;border-top:none;">                    
<input type="text" class="form-control" id="datepicker_from" name="sdate" style="width:120px;display:inline-block" autocomplete="off" required placeholder="from"/>
</td>

<td  style="vertical-align:middle;border-top:none;">
<input type="text" class="form-control" id="datepicker_to" name="edate" style="width:120px;display:inline-block" autocomplete="off" required placeholder="to"/>
</td>
<td style="vertical-align:middle;border-top:none;">
<button type="button" class="btn btn-outline-primary" style="float:right;" onclick="">검색</button>
</td>
</tr>
</table>

 

3) Datepicker Jquery 작성

$( function() {
    $.datepicker.setDefaults({
        closeText: "닫기",
        prevText: "이전달",
        nextText: "다음달",
        currentText: "오늘",
        monthNames: ['1월(JAN)','2월(FEB)','3월(MAR)','4월(APR)','5월(MAY)','6월(JUN)','7월(JUL)','8월(AUG)','9월(SEP)','10월(OCT)','11월(NOV)','12월(DEC)'],
        monthNamesShort: ['1월','2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
        monthNames: ['1월','2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
        dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
        dayNamesShot: ['일', '월', '화', '수', '목', '금', '토'],
        //dayNames: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
        dayNames: ['일', '월', '화', '수', '목', '금', '토'],

        changeMonth: true, //  월 변경가능
        changeYear: true, //  년 변경가능
        showMonthAfterYear: true, //  년 뒤에 월 표시
        dateFormat: "yy-mm-dd",  //  년월일 표시방법  yy-mm-dd 또는 yymmdd
        firstDay: 1, //  0: 일요일 부터 시작, 1:월요일 부터 시작
        autoSize: true, //  default: false, input 사이즈를 자동으로 리사이즈.
        showAnim: "fold", //  default: show , fold

        showWeek: false, //  주차 = true : 보이기 / false : 숨기기
        weekHeader: "주차", //  default: Wk, 주차 헤드 부분의 명칭 설정

        //showButtonPanel: true, //  하단에 Today, Done 버튼 Display
        gotoCurrent: false, //  default: false, true일 경우에는 Today버튼 클릭 시 현재 일자로 이동하지 못함

        // 달력버튼 관련
        //showOn: "button",
        //buttonImage: "<?php echo $g4[path]; ?>/img/calendar.gif",
        //buttonImageOnly: true

    });

    // 시작날짜와 끝나는 날짜를 함께 선택해서 사용할때
    var dates = $( "#datepicker_from, #datepicker_to " ).datepicker({
        //defaultDate: "+1w",  // 기본선택일이 1 week 이후가 선택되는 옵션
        changeMonth: true,
        numberOfMonths: 2,  // 한눈에 보이는 월달력수
        onSelect: function( selectedDate ) {
            var option = this.id == "datepicker_from" ? "minDate" : "maxDate",
            instance = $( this ).data( "datepicker" ),
            date = $.datepicker.parseDate(
            instance.settings.dateFormat ||
            $.datepicker._defaults.dateFormat,
            selectedDate, instance.settings );
            dates.not( this ).datepicker( "option", option, date );
        }
    });
});