jquery datepicker根據第一個字段中的選定日期限制第二個日期字段中的日期

如何限制用戶選擇「Client_Deadline1」字段日期，該日期小於「Internal_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").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根據第一個字段中的選定日期限制第二個日期字段中的日期

回答

相關問題