Bootstrap Datepicker и события changeDate с несколькими датчиками в таблице - PullRequest
0 голосов
/ 13 марта 2019

У меня есть таблица со сборщиком данных в каждой строке с динамически генерируемым идентификатором для каждого сборщика данных. В настоящее время у меня есть сценарий, который запускается при изменении даты, но я обнаружил, что он также запускается, когда пользователи используют клавиатуру для редактирования этого поля ввода.

Я мог бы изменить использование события changeDate , но не уверен, как это работает с несколькими сборщиками дат, когда я не могу указать идентификатор для каждого сборщика дат? Другой вариант - запретить пользователям изменять данные напрямую с помощью клавиатуры, но не уверен, возможно ли это?

Вот пример того, как выглядит моя таблица:

$(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>

1 Ответ

0 голосов
/ 13 марта 2019

$(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' );
      });      
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...