select Date picker popup not coming for each row

Question

我在我的表格中有一個表格（我有多行）用於第一行輸入點擊hijiri日期選擇器彈出窗口顯示，但對於其他 行輸入點擊日期選擇器彈出不來

這是我的代碼

<table class="table" id="tableId"> 
<thead> 
<tr> 
<th colspan="2" style="text-align:center">Card Expiry</th> 
</tr> 

</thead> 
<tbody> 
<tr ng-repeat="IQ in IQGridUpdates"> 
<td> 
<div> 
<input type="text" class="form-control" id="CardExpH1Date" on-click="showCal2();" maxlength="12" ng-model=IQ.CardExpH1Date/> 
</div> 
</td> 
</tr> 
</tbody> 
</table> 



<script type="text/javascript"> 

function showCal2() { 
$('#CardExpH1Date').calendarsPicker({ 
calendar: $.calendars.instance('islamic'), 
dateFormat: 'dd/mm/yyyy' 
}); 
} 


</script> 

Answer 1

的ID您使用的是各行應該是唯一的。當您遍歷HTML中的陣列，確保輸入元素的id屬性持有唯一值

它應該是類似下面，現在每個輸入元素將舉行一個唯一的ID，因此每個觸發器將調用該函數

<tbody> 
    <tr ng-repeat="IQ in IQGridUpdates"> 
    <td> 
    <div> 
     <input type="text" class="form-control" **id="CardExpH1Date_{{$index}}"** on-click="showCal2();" maxlength="12" ng-model=IQ.CardExpH1Date/> 
    </div> 
    </td> 
    </tr> 
</tbody> 

Answer 2

您需要爲每種輸入類型提供不同的id。假設IQ有一個獨特的數據，如IQ.id。

<table class="table" id="tableId"> 
<thead> 
<tr> 
<th colspan="2" style="text-align:center">Card Expiry</th> 
</tr> 

</thead> 
<tbody> 
<tr ng-repeat="IQ in IQGridUpdates"> 
<td> 
<div> 
<input type="text" class="form-control" id="IQ.id" on-click="showCal2(IQ.id);" maxlength="12" ng-model=IQ.CardExpH1Date/> 
</div> 
</td> 
</tr> 
</tbody> 
</table> 



<script type="text/javascript"> 

function showCal2(id) { 
$('#id').calendarsPicker({ 
calendar: $.calendars.instance('islamic'), 
dateFormat: 'dd/mm/yyyy' 
}); 
} 


</script> 

Answer 3

我很困惑這段代碼是什麼意思，我認爲這是無稽之談。如果您需要日期選擇器輸入，則只需將代碼

<script> 
    $('#CardExpH1Date').calendarsPicker({ 
    calendar: $.calendars.instance('islamic'), 
dateFormat: 'dd/mm/yyyy' 
}); 
</script> 

並刪除代碼中的「點擊」。 在這種情況下，沒有必要使用'onclick'，因爲它受jQuery Calendars Datepicker支持。

You can find more here