datepicker에 minDate/maxDate 설정하기

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);