在表中使用多个日期选择器引导 Datepicker 和 changeDate 事件

Question

我有一个表，每行都有一个数据选择器，每个日期选择器都有一个动态生成的 ID。我目前有一个脚本会在日期更改时触发，但我发现当用户使用键盘编辑此输入字段时也会触发。

我可以更改为使用 changeDate 事件，但当我无法为每个日期选择器指定 ID 时，不确定这如何与多个日期选择器一起使用？另一种选择是阻止用户直接使用键盘修改数据，但不确定是否可行？

这是我的表格当前外观的示例：

$(document).ready(function() {
      $(".form-control.datepicker").change(function() {
        alert("starting Date Updated Changes");
        //console.log( 'starting Date Updated update' );
      });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.en-AU.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet" />

<script>
  $('.datepicker').datepicker({
    todayHighlight: true,
    clearBtn: true,
    autoclose: true
  })
</script>

<table class="table table-condensed table-striped table-bordered">
  <tbody>
    <tr id="70283">
      <td>FT523452</td>
      <td>X234</td>
      <td>Container Oranges</td>
      <td>534830</td>
      <td class="">ZDSFASDF42234</td>
      <td>Transit</td>
      <td id="70283"><input type="text" id="70283" class="form-control datepicker" autocomplete="off" placeholder="Date Updated" data-date-format="dd/mm/yyyy" name="dateUpdated"></td>
    </tr>

    <tr id="70543">
      <td>PB213412</td>
      <td>Z98787</td>
      <td>Container Apples</td>
      <td>535092</td>
      <td class="">PSDFKS42134</td>
      <td>Transit</td>
      <td id="70543"><input type="text" id="70543" class="form-control datepicker" autocomplete="off" placeholder="Date Updated" data-date-format="dd/mm/yyyy" name="dateUpdated"></td>
    </tr>
  </tbody>
</table>

Answer 1

$(document).ready(function() {
      $(".datepicker").datepicker();
      $(".form-control.datepicker").change(function(e) {
      	console.log(e);
        alert("starting Date Updated Changes");
        //console.log( 'starting Date Updated update' );
      });      
});