日付ピッカーポップアップが各行に表示されない

Question

最初の行の入力のために私のフォームにテーブルがあります（複数の行があります）。ヒジリの日付ピッカーのポップアップが表示されますが、他に表示されます。 行の入力はピッカーのポップアップ

これはあなたがそれぞれの行を使用している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="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

です。あなたがHTMLで配列を反復処理すると、それゆえ各トリガーが呼び出す、今や各入力要素が固有のIDを保持する、ユニークな値を保持する機能を以下のように

それがあるべき何かをinput要素の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> 

を入れて、あなたのコードの「クリックオン」削除します。 jQueryカレンダーのDatepickerでサポートされているため、この場合は 'onclick'を使用する必要はありません。動作しない

You can find more here