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中迭代数组时，请确保input元素的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>

并删除代码中的“on click”。在这种情况下没有必要使用'onclick'，因为jQuery Calendars Datepicker支持它。

You can find more here

为每行选择日期选择器弹出窗口

3 个答案: