3 개의 필드가있는 jQuery 날짜 피커 범위?

Question

웹 양식을 만들 때 도착 자, 시작일 및 종료일에 대해 날짜 선택 도구를 사용하는 다음 3 개의 입력 필드가 있습니다.

"도착"날짜에 선적이 있어야하며 전시회는 "시작 날짜"부터 "종료 날짜"까지 지속됩니다.

"Start Date"& "End Date"필드의 범위를 만들 수 있었지만 이제 클라이언트는 시작/끝 범위를 "Arrive By"날짜 이전이 될 수 없도록 할 수 있습니다. 현재 날짜 이전이어야합니다.

"도착지"날짜를 현재 날짜보다 이전으로 선택할 수 없도록 제한 한 다음 입력 한 "도착지"날짜를 "시작 날짜"의 범위 시작 부분으로 지정할 수 있다고 가정합니다 그들이 원하는 것을 성취하십시오. (날짜로 도착할 때까지 시작/끝 필드를 비활성화해야합니까?)

불행히도, 이것은 내 기술 세트에서 조금 벗어난 많은 고급 코드가 필요할 것 같습니다. 누군가가 나를 올바른 방향으로 시작할 수 있기를 바랍니다.

Answer 1

몇 가지 옵션이 있습니다. 제출시 유효성 검사를 수행하여 사용자가 요구 사항을 충족하는 적절한 날짜를 선택했는지 또는 Datepicker restrict date range 옵션을 사용하여 다른 Datepicker의 선택한 값을 기반으로 사용 가능한 날짜를 제한 할 수 있습니다. Datepicker select a date range 기능을 살펴보면 최소/최대 선택 날짜를 설정하는 방법을 확인할 수 있습니다.

다음은이를 증명하는 JSFiddle의 예입니다. 이것은 철저히 테스트되지 않았으므로 정확히 원하는대로 동작하도록 행동해야 할 수도 있습니다. 예를 들어 arrive 날짜를 변경하면 to 최소 날짜도 변경하려고 할 수 있습니다.

HTML :

<label for="arrive">Arrive</label> 
<input type="text" id="arrive" name="arrive"> 
<br /> 
<label for="from">From</label> 
<input type="text" id="from" name="from"> 
<label for="to">to</label> 
<input type="text" id="to" name="to"> 

자바 스크립트 :

$("#arrive").datepicker({ 
    changeMonth: true, 
    numberOfMonths: 1, 
    onClose: function (selectedDate) { 
     $("#from").datepicker("option", "minDate", selectedDate); 
    } 
}); 
$("#from").datepicker({ 
    defaultDate: "+1w", 
    changeMonth: true, 
    numberOfMonths: 1, 
    onClose: function (selectedDate) { 
     $("#to").datepicker("option", "minDate", selectedDate); 
     $("#arrive").datepicker("option", "maxDate", selectedDate); 
    } 
}); 
$("#to").datepicker({ 
    defaultDate: "+1w", 
    changeMonth: true, 
    numberOfMonths: 1, 
    onClose: function (selectedDate) { 
     $("#from").datepicker("option", "maxDate", selectedDate); 
    } 
}); 

Answer 2

인가 당신이 시작과 끝으로 구성하고 현장에 별도의 분야에서 캡처 날짜 (다른 날짜 선택기?)에 의해 도착 날짜 범위?

ArriveBy가 datepicker에있는 경우 날짜를 선택하면 이벤트를 발생시킨 다음 다른 날짜 선택 도구의 속성을 변경하여 새로운 최소값 (/ 최대 값)으로 만들 수 있습니다. like

$("#ArriveBy").datepicker({ 
     onClose: function(selected) { 
     $("#StartEndRange").datepicker("option", "minDate", selected); 
     } 
}); 

시나리오에 정확히 맞는다면 100 % 아니지만 잘하면 도움이 될 것입니다.