表中包含多个日期选择器的Bootstrap 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' );
      });      
});