이전 날짜 피커에서 선택한 최소 날짜 설정

Question

두 개의 날짜 선택 도구가 있습니다. startdate 및 enddate입니다.

코드 설정 방법은 첫 번째 코드가 변경 될 때까지 두 번째 datepicker가 시작되지 않도록하는 것입니다. enddate datepicker는 현재 날짜가 startdate 인 것으로 초기화됩니다. 유일한 문제는 첫 번째 datepicker의 시간을 변경하면 mindate을 enddate에 새로 고치지 않는다는 것입니다.

$(function(){ 
    $("#startdate").datepicker({ minDate: currentTime }); 

     //When the startdate changes change the mindate for the enddate picker 
     $("#startdate").change(function(){ 
      startTime = ($("#startdate").val()); 
      $("#enddate").datepicker({ minDate: startTime }); 

     }); 

     //$("#enddate").datepicker({ minDate: currentTime }); 
    }); 

Answer 1

이미 초기화 된 위젯의 minDate 옵션을 업데이트 할 문서 (http://jqueryui.com/demos/datepicker/#method-option)에 설명 된대로이 option 방법을 사용해야합니다 내가-앞에 var 문을 넣어

$("#startdate, #enddate").datepicker({ minDate: currentTime }); 

$('#startdate').change(function() { 
    var startTime = ($("#startdate").val()); 
    $("#enddate").datepicker('option', 'minDate', startTime); 
}); 

공지 사항 startTime 변수의 값이므로 이벤트 핸들러의 로컬 범위에서 선언됩니다. 또한 두 Datepickers가 초기화되고 초기화되면 #startdate 요소가 변경 될 때마다 #enddate 위젯이 업데이트 된 minDate 옵션을 가져옵니다. 텍스트 상자의 http://jsfiddle.net/VP25m/

Answer 2

편집 : 날짜 선택기에서 새로 고침() 함수를 사용해보십시오 :

$("#startdate").change(function(){ 
    startTime = ($("#startdate").val()); 
    $("#enddate").datepicker({ minDate: startTime }); 
    $("#enddate").datepicker('refresh'); 

    }); 

아래

OLD 답변 : 당신은 아마 당신이 할 수 있도록 변수에 종료 날짜 날짜 선택기를 설정하는 것이 좋습니다

시작 날짜가 변경되면이를 파괴하고 다시 초기화하십시오.

$("#startdate").change(function(){ 
    startTime = ($("#startdate").val()); 
    if($("#enddate").datepicker("enabled")) { 
      endDatePicker.datepicker("destroy"); 
    } 
    var endDatePicker = $("#enddate").datepicker({ minDate: startTime }); 

    }); 

Answer 3

사용 datepicker의 onSelect 이벤트 대신 change 이벤트 : 여기

는 데모입니다. 이 경우 selected 날짜를 최후의 datapicker로 minDate으로 설정할 수있는 첫 번째 인수로 가져옵니다.

$("#startdate").datepicker({ 
    minDate: currentTime, 
    onSelect: function(date){ 

     //if the datepicker is not initialized 
     $("#enddate").datepicker({ minDate: date }); 

     //if the datepicker is already initialized 
     $("#enddate").datepicker("option", "minDate", date); 
    } 
}); 

Demo

참조 : http://jqueryui.com/demos/datepicker/#event-onSelect