Jquery datepicker는 첫 번째 필드에서 선택한 날짜를 기준으로 두 번째 날짜 필드의 날짜를 제한합니다.

"Internal_Deadline1"필드에서 선택한 날짜보다 작은 "Client_Deadline1"필드 날짜를 선택하도록 사용자를 제한하는 방법.Jquery datepicker는 첫 번째 필드에서 선택한 날짜를 기준으로 두 번째 날짜 필드의 날짜를 제한합니다.

코드 :

 <script type='text/javascript'> 
     //<![CDATA[ 
     $(function() { 
     $('.one').datepicker(); 
     $('#data').on('change', '.one', function (date) {     
     var date2 = $(this).datepicker('getDate'); 
     date2.setDate(date2.getDate() + 3); 
     var day2=date2.getDay(); //0=Sun, 1=Mon, .., 6=Sat 
     if(day2==3){//Sunday 
    date2.setDate(date2.getDate()+0); 
    } 
    if(day2==2){//Saturday 
    date2.setDate(date2.getDate()+1); 
    } 
    if(day2==1){//friday 
    date2.setDate(date2.getDate()+2); 
    } 
     else if(day2==0){//Thursday 
     date2.setDate(date2.getDate()+2); 
     } 
     else if(day2==6){ 
     date2.setDate(date2.getDate()+2); 
     } 
     $(this).parent('td').next('td').find('.two').datepicker('setDate', date2); 
     }); 
     $('.two').datepicker(); 
     }); 
     $(document).ready(function() { 
     var currentItem = 1; 
     $(".datepicker").datepicker(); 
     $('#addnew').click(function(){ 
     currentItem++; 
     $('#items').val(currentItem); 
     var strToAdd = '<tr><td style=""><input type="text" name="task'+currentItem+'" id="task'+currentItem+'" value="" /></td><td style=""><input type="text" name="Description'+currentItem+'" id="Description'+currentItem+'" value="" /></td><td style="width: 160px;"><input type="text" class="one datepicker" name="Internal_Deadline'+currentItem+'" id="Internal_Deadline'+currentItem+'" /></td><td style=""><input type="text" class="two datepicker" name="Client_Deadline'+currentItem+'" id="Client_Deadline'+currentItem+'" /></td><td style=""><input type="text" class="datepicker" name="Actual_Deadline'+currentItem+'" id="Actual_Deadline'+currentItem+'" /></td><td style="width:83px;"></td></tr>'; 
     $('#data').append(strToAdd); 
     $(".datepicker").datepicker(); 

     }); 
     }); 
     //]]> 
     </script>

HTML :

 <input type="button" id="addnew" name="addnew" value="Add a Row" /> 
     <TABLE id="data" class="dd" style=""> 
     <TR> 
     <td style=""><input type="text" name="task1" id="task1" value="" /></td><td style=""><input type="text" name="Description1" id="Description1" value="" /></td><td style="width: 160px;"><input type="text" class="one datepicker" name="Internal_Deadline1" id="Internal_Deadline1" value="" /></td><td><input type="text" class="two datepicker" name="Client_Deadline1" id="Client_Deadline1" value="" /></td><td style=""><input type="text" class="datepicker" name="Actual_Deadline1" id="Actual_Deadline1" value="" /></td><td style="width: 83px;"></td></tr> 
     <input type="hidden" id="items" name="items" value="1" /> 
     </TABLE>

출처

2014-02-27 user3317777

정확하게 귀하의 질문은 무엇입니까 :

나는 여기에 바이올린을 만들었어요? 사용자가 Internal_Deadline1에서 날짜를 선택하면 Client_Deadline1의 날짜 선택기에서 Internal_Deadline1 이전의 날짜 만 표시하도록합니다. –

사용자가 Internal_Deadline1에서 날짜를 선택하면 Client_Deadline1의 날짜 선택기가 Internal_Deadline1 날짜 이후에 표시되기를 원합니다. – user3317777

가능한 복제본 [Jquery datepicker는 첫 번째 날짜 필드의 선택한 날짜를 기준으로 두 번째 날짜 필드의 날짜를 제한합니다.] (http://stackoverflow.com/questions/16373734/jquery-datepicker-restrict-dates-in-second-date-field) 선택 날짜 - 기준) – j08691

여기 내가 쓴 휴일 예약 시스템의 예입니다. 사용자가 시작 날짜를 선택하면 끝 날짜는 시작 날짜 이후 여야합니다.

여기 형태

<form action="test.html" method="post" enctype="multipart/form-data" class="createForm" id="createForm"> 

    <div> 
     <label for="startDate" >First day</label> 
     <input style="width: 100px" type="text" id="startDate" name="startDate" size="10"/> 
    </div> 

    <div> 
     <label for="endDate" >Last Day</label> 
     <input style="width: 100px" type="text" id="endDate" name="endDate" size="10"/> 
    </div> 

</form>

입니다 그리고 여기 날짜 선택과 마법에 대한 jQuery를 UI를 사용하여 코드의의의 startDate의 변화에 대한 통지 그것은 endDate가

$("#startDate").datepicker({ changeMonth: true, 
     changeYear: true, 
     dateFormat:'dd/mm/yy', 
     showButtonPanel: true, 
     firstDay: '1', 
     beforeShowDay: $.datepicker.noWeekends, 

     // This function changes the 'endDate' calendar picker to show future days 
     onSelect: function(dateStr) { 
      $('#endDate').datepicker('option', 'defaultDate', dateStr); 
      $('#endDate').datepicker('option', 'minDate', dateStr); 
     } 

}); 

$("#endDate").datepicker({ changeMonth: true, 
     changeYear: true, 
     dateFormat:'dd/mm/yy', 
     showButtonPanel: true, 
     firstDay: '1', 
     beforeShowDay: $.datepicker.noWeekends   
});

에 최소 값을 설정 바라건대이 코드를 코드 내에서 작동하도록 조정할 수 있기를 바랍니다. JSFiddle

출처

2014-03-04 17:05:01

Jquery datepicker는 첫 번째 필드에서 선택한 날짜를 기준으로 두 번째 날짜 필드의 날짜를 제한합니다.

답변

관련 문제