表中具有相同類的多個日期選擇器

Question

我需要使用datepicker輸入創建2個或多個錶行。他們都有相同的名字。當我選擇'開始日期'時，結束日期不能大於開始日期。如果只有一行，該示例可以工作，但對於具有相同類的多行，則不起作用。請幫忙。

HTML：

<table class="list"> 
<thead> 
    <tr> 
     <td>Title</td> 
     <td>Start Date</td> 
     <td>End Date</td> 
     <td></td> 
    </tr> 
</thead>     
<tbody>     
    <tr> 
     <td><input type="text" value="new 1" size="2"></td> 
     <td><input type="text" class="startdate" ></td> 
     <td><input type="text" class="enddate" ></td> 
    </tr> 
    <tr> 
     <td><input type="text" value="new 2" size="2"></td> 
     <td><input type="text" class="startdate"></td> 
     <td><input type="text" class="enddate"></td> 
    </tr> 
</tbody> 

JS：

$(".startdate").datepicker({ 
     dateFormat:'dd/mm/yy', 
     minDate: new Date(), 
     onSelect: function(dateStr) { 
      $('.enddate').datepicker('option', 'defaultDate', dateStr); 
      $('.enddate').datepicker('option', 'minDate', dateStr); 
     } 

});  
$(".enddate").datepicker({ 
     dateFormat:'dd/mm/yy', 
     minDate: new Date() 
}); 

這裏是JSFiddle例子。

Answer 1

由於您使用了endDate,的類，因此它會影響具有相同類的所有元素。

改爲使用下面的方法，你可以使它代表endDate那個特定的行;因此它不會影響表格中的其他endDate。

$(".startdate").datepicker({ 
    dateFormat: 'dd/mm/yy', 
    minDate: new Date(), 
    onSelect: function (dateStr, ops) { 
     var endDate = $(this).parents('tr').find('.enddate'); 
     $(endDate).datepicker('option', 'defaultDate', dateStr); 
     $(endDate).datepicker('option', 'minDate', dateStr); 
    } 
}); 

JSFiddle

在這裏，當你從startDate選擇日期，下面將得到特別tr的endDate元素。

var endDate = $(this).parents('tr').find('.enddate'); 

因此，爲上述變量設置minDate並解決您的問題。