메뉴 건너뛰기

조회 수 7930 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
    $("#start_year, #start_month, #end_year, #end_month").change(function() {
         
        var checkNum = 2;//3개월이면 2로 셋팅
         
        //선택된 값을 가져온다.
        var startYear = $("#start_year option:selected").val();
        var startMonth = $("#start_month option:selected").val();
        var endYear = $("#end_year option:selected").val();
        var endMonth = $("#end_month option:selected").val();
        //계산을 위해 명시적으로 형변환
        var startYearNum = Number(startYear);
        var startMonthNum = Number(startMonth);
        var endYearNum = Number(endYear);
        var endMonthNum = Number(endMonth);
         
        //일단 차이를 재서 위에서 정한 월이 넘어가는지 확인  
        var result = ((endYearNum*12)+endMonthNum) - ((startYearNum*12)+startMonthNum);
                 
        if(result>checkNum){
             
            alert("날짜 검색 범위는 "+(checkNum+1)+"개월 입니다.");
             
            if(endMonthNum<=checkNum){
                startYearNum = endYearNum-1;
                startMonthNum = 12-(checkNum-endMonthNum)
            }else{
                startYearNum = endYearNum;
                startMonthNum = endMonthNum-checkNum;
            }
             
            $("#start_year").val(startYearNum).attr("selected", "selected");
            $("#start_month").val(startMonthNum).attr("selected", "selected");
             
        };
         
    });
      
});
</script>
 
<select id="start_year" name="start_year">
    <option value="2015" >2015</option>
    <option value="2014" >2014</option>
    <option value="2013" >2013</option>
</select>
<select id="start_month" name="start_month">
    <option value="1" >1</option>
    <option value="2" >2</option>
    <option value="3" >3</option>
    <option value="4" >4</option>
    <option value="5" >5</option>
    <option value="6" >6</option>
    <option value="7" >7</option>
    <option value="8" >8</option>
    <option value="9" >9</option>
    <option value="10" >10</option>
    <option value="11" >11</option>
    <option value="12" >12</option>
</select> ~
<select id="end_year" name="end_year">
    <option value="2015" >2015</option>
    <option value="2014" >2014</option>
    <option value="2013" >2013</option>
</select>
<select id="end_month" name="end_month">
    <option value="1" >1</option>
    <option value="2" >2</option>
    <option value="3" >3</option>
    <option value="4" >4</option>
    <option value="5" >5</option>
    <option value="6" >6</option>
    <option value="7" >7</option>
    <option value="8" >8</option>
    <option value="9" >9</option>
    <option value="10" >10</option>
    <option value="11" >11</option>
    <option value="12" >12</option>
</select> 
<input type="image" src="/images/button/search.gif" alt="검색" class="img"/>

제목을 뭘로 정해야 할지 몰라서 그냥 막 적었습니다.
일반적으로 어떠한 데이터를 검색할때 DB에 부담을 줄이고 속도를 빠르게 하기 위해 검색시에 날짜 범위에 제한을 걸어 검색의 속도를 증가 시킵니다.
3개월 범위만 검색 가능 하다거나 이런식으로요.


아래 소스를 확인하시면 년도에 12개월을 곱해서 계산 했습니다. ㅋㅋ




  1. No Image 22Dec
    by
    2016/12/22 Views 7834 

    하단 고정 레이어 스타일(CSS) 따라하기

  2. No Image 22Dec
    by
    2016/12/22 Views 6968 

    항상 레이어가 정 가운데 위치하는 스크립트

  3. No Image 22Dec
    by
    2016/12/22 Views 6563 

    scrolling to top

  4. Ajax를 이용한 데이터 조회시 로딩 로딩 이미지 보이기(jquery이용)

  5. No Image 22Dec
    by
    2016/12/22 Views 6284 

    금액단위 제거 표기

  6. No Image 22Dec
    by
    2016/12/22 Views 7193 

    시간 카운트

  7. No Image 22Dec
    by
    2016/12/22 Views 6432 

    디자인 셀렉트 박스 & CSS

  8. No Image 22Dec
    by
    2016/12/22 Views 8425 

    흐르는 배너 만들기2

  9. No Image 22Dec
    by
    2016/12/22 Views 10379 

    bxslider 멈춤현상

  10. No Image 22Dec
    by
    2016/12/22 Views 49862 

    jquery 플러그인 링크 모음

  11. No Image 18Nov
    by
    2016/11/18 Views 7284 

    html 테이블 고정 (table fixed)

  12. No Image 18Nov
    by
    2016/11/18 Views 7193 

    이미지 클릭 손 (cursor:pointer)

  13. No Image 18Nov
    by
    2016/11/18 Views 7018 

    jQuery Selector (셀렉터)

  14. 날짜 검색 범위 정하기 (jquery)

  15. No Image 17Nov
    by
    2016/11/17 Views 10147 

    jQuery 날짜 비교 (날짜비교)

  16. jQuery 카테고리 선택에 따른 하위 카테고리 변경 (selecbox)

  17. No Image 17Nov
    by
    2016/11/17 Views 10116 

    jquery radio checked (라디오 버튼 값으로 선택), 검색 조건 초기 셋팅

  18. No Image 17Nov
    by
    2016/11/17 Views 6576 

    jquery 뒤로가기

  19. No Image 17Nov
    by
    2016/11/17 Views 8622 

    jQuery tr 추가 (입력창 추가), jQuery 테이블 행 추가/삭제, selector last name

  20. No Image 17Nov
    by
    2016/11/17 Views 7024 

    jQuery, JavaScript 새로고침(reload)

Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved