jQuery DatePicker 기간조회

개요

기간 조회 종류별로 정리

script

$(document).ready(function() {
    
    var now = new Date();
    var firstDate ,lastDate;
    
    firstDate = new Date(now.getFullYear(),now.getMonth(),1);
    lastDate = new Date(now.getFullYear(),now.getMonth()+1,0);
    
    $('#startdate').val($.datepicker.formatDate('yy-mm-dd', firstDate));
    $('#enddate').val($.datepicker.formatDate('yy-mm-dd', lastDate));
 
    // Datepicker           
    $(".datepicker").datepicker({
        dateFormat : 'yy-mm-dd',
//         buttonImage : '/images/datepicker.png',
        buttonImageOnly : true,
        changeMonth : true, // 월선택 select box 표시 (기본은 false)
        dayNames: ['월요일', '화요일', '수요일', '목요일', '금요일', '토요일', '일요일'],
        dayNamesMin: ['월', '화', '수', '목', '금', '토', '일'],
        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월'],
        changeYear : true, // 년선택 selectbox 표시 (기본은 false)
        showButtonPanel : true, // 하단 today, done  버튼기능 추가 표시 (기본은 false)
        currentText: '오늘 날짜',
        closeText: '닫기',
        onClose : function ( selectedDate ) {
       
            var eleId = $(this).attr("id");
            var optionName = "";
 
            if(eleId.indexOf("StartDate") > 0) {
                eleId = eleId.replace("StartDate", "EndDate");
                optionName = "minDate";
            } else {
                eleId = eleId.replace("EndDate", "StartDate");
                optionName = "maxDate";
            }
 
            $("#"+eleId).datepicker( "option", optionName, selectedDate );       
            $(".searchDate").find(".chkbox2").removeClass("on");
        }
    });
   
        $('#searchStartDate').datepicker("option","onClose", function( selectedDate ) {   
            // 시작일 datepicker가 닫힐때
            // 종료일의 선택할수있는 최소 날짜(minDate)를 선택한 시작일로 지정
            $("#searchEndDate").datepicker( "option", "minDate", selectedDate );
            $(".searchDate").find(".chkbox2").removeClass("on");
        });
       
    
        //종료일.
        $('#searchEndDate').datepicker("option","onClose", function( selectedDate ) {   
            // 종료일 datepicker가 닫힐때
            // 시작일의 선택할수있는 최대 날짜(maxDate)를 선택한 종료일로 지정
            $("#searchStartDate").datepicker( "option", "maxDate", selectedDate );
            $(".searchDate").find(".chkbox2").removeClass("on");
        });
       
        $('#searchEndDate').datepicker("option","onSelect", function( selectedDate ) {   
            // 종료일 datepicker가 닫힐때
            // 시작일의 선택할수있는 최대 날짜(maxDate)를 선택한 종료일로 지정
            $("#searchStartDate").datepicker( "option", "maxDate", selectedDate );
            $(".searchDate").find(".chkbox2").removeClass("on");
           
            var f = document.frm;
            f.method = "post";
            $(".adminbuildenergyno").remove(); //name값이 다수여서 지워여야함
            f.submit();
        });
       
    
        $(".dateclick").dateclick();    // DateClick
        $(".searchDate").schDate();        // searchDate
       
    });
    
    // Search Date
    
    $.fn.schDate = function() {
       var $obj = $(this);
       var $chk = $obj.find("input[type=radio]");
       $chk.click(function() {
           $('input:not(:checked)').parent(".chkbox2").removeClass("on");
           $('input:checked').parent(".chkbox2").addClass("on");
       });
    }
    
    // DateClick
    jQuery.fn.dateclick = function() {
       var $obj = $(this);
       $obj.click(function() {
           $(this).parent().find("input").focus();
       });
    }
    
    function setSearchDate(start) {
    
       var num = start.substring(0, 1);
       var str = start.substring(1, 2);
    
       var today = new Date();
    
       //var year = today.getFullYear();
       //var month = today.getMonth() + 1;
       //var day = today.getDate();
    
       var endDate = $.datepicker.formatDate('yy-mm-dd', today);
       $('#searchEndDate').val(endDate);
    
       if (str == 'd') {
           today.setDate(today.getDate() - num);
       } else if (str == 'w') {
           today.setDate(today.getDate() - (num * 7));
       } else if (str == 'm') {
           today.setMonth(today.getMonth() - num);
           today.setDate(today.getDate() + 1);
       }
    
       var startDate = $.datepicker.formatDate('yy-mm-dd', today);
       $('#searchStartDate').val(startDate);
    
       // 종료일은 시작일 이전 날짜 선택하지 못하도록 비활성화
       $("#searchEndDate").datepicker("option", "minDate", startDate);
    
       // 시작일은 종료일 이후 날짜 선택하지 못하도록 비활성화
       $("#searchStartDate").datepicker("option", "maxDate", endDate);
    
       var f = document.frm;
       f.method = "post";
       $(".adminbuildenergyno").remove(); //name값이 다수여서 지워여야함
       f.submit();
    }

jsp

            <table class="searchBox">
                    <caption>조회</caption>
                    <colgroup>
                        <col width="123px">
                        <col width="*">
                    </colgroup>
                    <tbody>
                        <tr>
                            <th>조회기간</th>
                            <td>
                               <span class="chkbox2">
                                            <input type="radio" name="dateType" id="dateType1" onclick="setSearchDate('0d')"/>
                                            <label for="dateType1">당일</label>
                                        </span>
                                        <span class="chkbox2">
                                            <input type="radio" name="dateType" id="dateType2" onclick="setSearchDate('3d')"/>
                                            <label for="dateType2">3일</label>
                                        </span>
                                        <span class="chkbox2">
                                            <input type="radio" name="dateType" id="dateType3" onclick="setSearchDate('1w')"/>
                                            <label for="dateType3">1주</label>
                                        </span>
                                        <span class="chkbox2">
                                            <input type="radio" name="dateType" id="dateType4" onclick="setSearchDate('2w')"/>
                                            <label for="dateType4">2주</label>
                                        </span>
                                        <span class="chkbox2">
                                            <input type="radio" name="dateType" id="dateType5" onclick="setSearchDate('1m')"/>
                                            <label for="dateType5">1개월</label>
                                        </span>
                                        <span class="chkbox2">
                                            <input type="radio" name="dateType" id="dateType6" onclick="setSearchDate('3m')"/>
                                            <label for="dateType6">3개월</label>
                                        </span>
                                        <span class="chkbox2">
                                            <input type="radio" name="dateType" id="dateType7" onclick="setSearchDate('6m')"/>
                                            <label for="dateType7">6개월</label>
                                        </span>
                               
                                <div class="clearfix">
                                    <!-- 시작일 -->
                                    <span class="dset">
                                        시작일<input type="text" class="datepicker inpType" name="startdate" id="searchStartDate" value="${adminBuildEnergyVo.startdate }" >
                                        <a href="#none" class="btncalendar dateclick"><img src="/images/datepicker.png"></a>
                                    </span>
                                    <span class="demi">~</span>
                                    <!-- 종료일 -->
                                    <span class="dset">
                                        종료일<input type="text" class="datepicker inpType" name="enddate" id="searchEndDate" value="${adminBuildEnergyVo.enddate }" >
                                        <a href="#none" class="btncalendar dateclick"><img src="/images/datepicker.png"></a>
                                    </span>
                                </div>   
                            </td>
                        </tr>
                    <tbody>
                </table>

Result