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>

在表中具有多个日期选择器的Bootstrap Datepicker和changeDate事件

0 个答案: