jquery datepicker 달력두개 연동시 minDate 설정보완 (구체적 질문 내용에 넣었어요)
조회수 1524 답변수 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>
  45. /* ★ 설정숙제
  46. 1. 가는편 선택 후 다시 월 이동시 오는편 minDate 선택값 도 초기화되어
  47.   원래대로 가는편 월과 동일한 월로 같이 이동
  48. 2. 가는편 월 이동시 오는편 월은 현재 이동된 가는편 월 이전으로 이동불가
  49.  */
  50. var deadLine = new Date(),
  51.     y = deadLine.getFullYear(),
  52.     m = deadLine.getMonth()+1,
  53.     d = deadLine.getDate(),
  54.     h = deadLine.getHours(),
  55.     M = deadLine.getMinutes();
  56.  
  57. if(h >= 16 && M >= 30 ) d++;
  58. deadLine = y + "-" + m + "-" + d;
  59.  
  60. $(function()
  61.   {
  62.  
  63.     // 분 단위로 minDate 제어  - 16:30 지나면 minDate 일 단위에 하루 플러스 하여 선택불가 만들기
  64.     $( "#godate" ).datepicker({   // http://blog.naver.com/wizardkyn/220661505153
  65.       minDate: deadLine  //1. 좌측 달력 날짜의 최초 값은 기본 기능에 나와 있듯 “오늘” 날짜이며, 오늘 날짜 이전으로 월 & 일 이동 불가
  66.               //minDate 옵션 설정
  67.       ,dayNamesMin: [ "일", "월", "화", "수", "목", "금", "토"] //달력 한글화(요일)
  68.       ,monthNames: [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ]//달력 한글화(월)
  69.         ,yearSuffix:"년"
  70.         ,showMonthAfterYear:true
  71.         ,nextText:"다음달"
  72.         ,prevText:"이전달"
  73.         ,dateFormat:"yy-mm-dd"
  74.       ,onSelect: function(selected,evnt)
  75.       {
  76.          //3. 좌측 달력에서 날짜를 선택하면 우측 달력은 좌측 달력에서 선택된 날짜 이전으로 월 & 일 이동 불가
  77.          var day = $("#godate").datepicker('getDate');
  78.          $('#backdate').datepicker('option','minDate', day);//오른쪽달력 minDate 옵션으로 왼쪽달력의 선택된 날짜를 지정
  79.       }
  80.       ,onChangeMonthYear:function(year,month,evnt)//왼쪽이나 오른쪽버튼을 눌렀을때 호출되는 콜백함수
  81.       {
  82.          //2. 좌측 달력의 ‘월“ 과 우측 달력의 ’월‘ 은 동일하게 움직이도록 처리
  83.             var day2 = $("#godate").datepicker('getDate');
  84.          day2.setMonth(month-1);
  85.          day2.setFullYear(year);
  86.          $('#backdate').datepicker('setDate', day2)
  87.  
  88.       }
  89.  
  90.   });
  91.    $( "#backdate" ).datepicker({
  92.  
  93.  
  94.        minDate: deadLine
  95.       ,dayNamesMin: [ "일", "월", "화", "수", "목", "금", "토"]//달력 한글화(요일)
  96.       ,monthNames: [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ]//달력 한글화(월)
  97.         ,yearSuffix:"년"
  98.         ,showMonthAfterYear:true
  99.         ,nextText:"다음달"
  100.         ,prevText:"이전달"
  101.         ,dateFormat:"yy-mm-dd"
  102.    });
  103.  
  104.  
  105.    });
  106.      </script>
  107. </head>
  108.  
  109.  
  110. <body>
  111.  <div id="godate" style="display:inline-block"></div>
  112. <div id="backdate" style="display:inline-block"></div>
  113.      </body>
  114. </html>


답변 작성

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

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

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