jquery datepicker 달력두개 연동시 minDate 설정보완 (구체적 질문 내용에 넣었어요)
조회수 5462 답변수 0 반응수 1 등록일 2017.03.19 21:05:46

가는편과 오는편 달력 두개를 연동하는 코드인데요, ( 그냥 달력 두개 연동 )


가는편에서 월 이동시 오는편달력도 가는편 월과 동일한 월로 같이 이동하도록 설정한

코드입니다


질문1 : 오는편 달력에서 현재 오는편달력의 년/월 이전으로
        이동불가하게 하려면 어떻게 해야할까요


  1. onChangeMonthYear:function(year,month,evnt)//왼쪽이나 오른쪽버튼을 눌렀을때 호출되는 콜백함수
  2. {
  3.  //2. 좌측 달력의 ‘월“ 과 우측 달력의 ’월‘ 은 동일하게 움직이도록 처리
  4.  
  5.           var day2 = $("#godate").datepicker('getDate');
  6.  day2.setMonth(month-1);
  7.  day2.setFullYear(year);
  8.  $('#backdate').datepicker('setDate', day2)
  9.  
  10. ...
  11.  
  12. <div id="godate" style="display:inline-block"></div> // 가는편달력
  13. <div id="backdate" style="display:inline-block"></div> // 오는편달력
  14.  
  15. minDate 옵션값으로 현재 이동된 가는편 년/월 값을 변수에 저장해서 적용하면 간단히 될텐데
  16. 그걸 코드로 구현하는게 이리저리 해봐도 안되네요
  17.  
  18. ===============================
  19.  
  20. 두번째로 가는편에서 날짜를 선택하면 오는편 minDate 값으로 가는편에서 선택한 날짜를 지정해서
  21. 가는편에서 선택한 날짜 이전으로 이동불가되도록 코드가 짜여졌는데
  22.  
  23. 다시 가는편 월을 미래 월로 이동하면 오는편도 같이 잘 움직이는데, 문제는 가는편 월을 이전 월로
  24. 이동하면 그때는 최초 가는편에서 선택했던 값이 오는편 minDate 값으로 지정되어서
  25.  오는편 월이 가는편 월과 같이 이동하지 않아요
  26.  
  27.  
  28. 질문2 :가는편에서 날짜 선택 후 다시 이동할 때 선택시 오는편 minDate 값을 입력된 값을
  29.        초기화시키려면 어떻게 해야 할까요 
  30.  
  31.  
  32. ============= 아래 코드는 전체 코드 입니다 ==============
  33.  
  34.  
  35. <!doctype html>
  36. <html lang="en">
  37. <head>
  38.   <meta charset="utf-8">
  39.   <meta name="viewport" content="wideadLineh=device-wideadLineh, initial-scale=1">
  40.   <link rel="stylesheet" href="jquery-ui.min.css">
  41.   <script src="jquery-3.1.1.min.js"></script>
  42.   <script src="jquery-ui.min.js"></script>
  43.  
  44.    <script>
  46. /* ★ 설정숙제
  47. 1. 가는편 선택 후 다시 월 이동시 오는편 minDate 선택값 도 초기화되어
  48.   원래대로 가는편 월과 동일한 월로 같이 이동
  49. 2. 가는편 월 이동시 오는편 월은 현재 이동된 가는편 월 이전으로 이동불가
  50.  */
  52. var deadLine = new Date(),
  53.     y = deadLine.getFullYear(),
  54.     m = deadLine.getMonth()+1,
  55.     d = deadLine.getDate(),
  56.     h = deadLine.getHours(),
  57.     M = deadLine.getMinutes();
  58.  
  59. if(h >= 16 && M >= 30 ) d++;
  60. deadLine = y + "-" + m + "-" + d;
  61.  
  62. $(function()
  63.   {
  64.  
  65.     // 분 단위로 minDate 제어  - 16:30 지나면 minDate 일 단위에 하루 플러스 하여 선택불가 만들기
  67.     $( "#godate" ).datepicker({   // http://blog.naver.com/wizardkyn/220661505153
  68.       minDate: deadLine  //1. 좌측 달력 날짜의 최초 값은 기본 기능에 나와 있듯 “오늘” 날짜이며, 오늘 날짜 이전으로 월 & 일 이동 불가
  69.               //minDate 옵션 설정
  71.       ,dayNamesMin: [ "일", "월", "화", "수", "목", "금", "토"] //달력 한글화(요일)
  72.       ,monthNames: [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ]//달력 한글화(월)
  73.         ,yearSuffix:"년"
  74.         ,showMonthAfterYear:true
  75.         ,nextText:"다음달"
  76.         ,prevText:"이전달"
  77.         ,dateFormat:"yy-mm-dd"
  78.       ,onSelect: function(selected,evnt)
  79.       {
  80.          //3. 좌측 달력에서 날짜를 선택하면 우측 달력은 좌측 달력에서 선택된 날짜 이전으로 월 & 일 이동 불가
  81.          var day = $("#godate").datepicker('getDate');
  82.          $('#backdate').datepicker('option','minDate', day);//오른쪽달력 minDate 옵션으로 왼쪽달력의 선택된 날짜를 지정
  83.       }
  84.       ,onChangeMonthYear:function(year,month,evnt)//왼쪽이나 오른쪽버튼을 눌렀을때 호출되는 콜백함수
  85.       {
  86.          //2. 좌측 달력의 ‘월“ 과 우측 달력의 ’월‘ 은 동일하게 움직이도록 처리
  88.             var day2 = $("#godate").datepicker('getDate');
  89.          day2.setMonth(month-1);
  90.          day2.setFullYear(year);
  91.          $('#backdate').datepicker('setDate', day2)
  92.  
  93.       }
  94.  
  95.   });
  96.    $( "#backdate" ).datepicker({
  97.  
  98.  
  99.        minDate: deadLine
  100.       ,dayNamesMin: [ "일", "월", "화", "수", "목", "금", "토"]//달력 한글화(요일)
  101.       ,monthNames: [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ]//달력 한글화(월)
  102.         ,yearSuffix:"년"
  103.         ,showMonthAfterYear:true
  104.         ,nextText:"다음달"
  105.         ,prevText:"이전달"
  106.         ,dateFormat:"yy-mm-dd"
  107.    });
  108.  
  109.  
  110.    }); 
  112.      </script>
  113. </head>
  114.  
  115.  
  116. <body>
  118.  <div id="godate" style="display:inline-block"></div>
  119. <div id="backdate" style="display:inline-block"></div>
  120.      </body>
  121. </html>


조용남자 2
jquery
반응 이력
0 댓글
작성한 댓글 등록하기

답변 작성

질문에 적합한 답변을 상세히 작성해 주시기 바랍니다.

답변이 찬성되면 태그평판 +2점이 적립, 반대되면 태그평판 -1점 차감됩니다.

답변이 채택되면 태그평판 +10점이 적립됩니다.

jquery 게시판 정보
  • 8
    질문수
  • 0
    아카이브수
  • 4
    채택수
  • 0
    멤버수
jquery 질문 통계
최근 30일
답변율
0%
채택율
0%
전체
답변율
50%
채택율
50%
최근에 등록된 질문