2개의 달력 InputBox의 시작/종료일자를

상호 선택한 날짜들로 제한하고자 할 때 사용할 수 있다.

 

 

<link rel="stylesheet" href="/css/jquery.datetimepicker.css" type="text/css" />

<script type="text/javascript" src="/js/jquery.datetimepicker.js"></script>

 

$( function() {
    $("input[name='xxx']").datepicker( {
        onClose : function( selectedDate ) {  // 날짜를 설정 후 달력이 닫힐 때 실행
                      if( selectedDate != "" ) {
                          // yyy의 minDate를 xxx의 날짜로 설정
                          $("input[name='yyy']").datepicker("option", "minDate", selectedDate);
                      }
                  }
    } );

    $("input[name='yyy']").datepicker( {
        onClose : function( selectedDate ) {  // 날짜를 설정 후 달력이 닫힐 때 실행
                      if( selectedDate != "" ) {
                          // xxx의 maxDate를 yyy의 날짜로 설정
                          $("input[name='xxx']").datepicker("option", "maxDate", selectedDate);
                      }
                  }
    } );
} );

 

 

* 선택된 날짜의 다음날로 제한하고자 할 때는?

 

var curDate = $("input[name='xxx']").datepicker("getDate");  // Date return
curDate.setDate( curDate.getDate() + 1 );
$("input[name='yyy']").datepicker("option", "minDate", curDate);

 

var optMinDate = $("input[name='xxx']").datepicker("option","minDate");

 

달력의 선택 가능범위의 최소값인 minDate가 설정되어있다면

해당 날짜가 format style대로 return되고

 

설정이 되어있지 않다면, NULL이 return된다.

 

 

+ Recent posts