在 php 中循环并合并 Datetimepicker

Question

我正在使用 datetimepicker javascript 进行引导。如果只有一个输入字段或者它是多个输入字段中的第一个，则该实例有效。但是如果有多个字段，其他的就不行了。

小部件是从 php 中的 foreach 循环创建的，因此 foreach 记录它提供了一个新部分，其中包含标题、到期日期和 datetimepicker 字段以创建新日期。但是，如果我点击第二个或第三个日期选择器项目的日历图标，它只会激活第一个的弹出日历。

如何正确地将其合并到循环中，以便每个字段都有自己的 datetimepicker 输入？

<?php foreach($v as $k=>$n): ?>
<!--Body of the Modal for expired displays-->
<br>
<h6><?php echo $n['Type'] ?></h6>
<h6>Date/Time Expiring: <?php echo $n["Expiration"] ?></h6>
<h6>Set New Expiration:</h6>
  <div class="form-group">
    <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
      <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
      <span class="input-group-addon" data-target="#datetimepicker1" data-toggle="datetimepicker">
          <span class="fa fa-calendar"></span>
      </span>
    </div>
  </div>                 
<?php endforeach; ?>

<script type="text/javascript">
$(function () {
  $('#datetimepicker1').datetimepicker({
     icons: {
                  time: "fa fa-clock-o",
                  date: "fa fa-calendar",
                  up: "fa fa-arrow-up",
                  down: "fa fa-arrow-down"
              }
  });
});
</script>

更新：

<div class="form-group">
              <div class=" datepicker input-group date"  data-target-input="nearest">
                <input type="text" class="form-control datetimepicker-input" data-target=".datepicker"/>
                <span class="input-group-addon" data-target=".datepicker" data-toggle="datetimepicker">
                    <span class="fa fa-calendar"></span>
                </span>
              </div>
            </div>
<script type="text/javascript">
$('.datepicker').each(function(){
  $(this).datetimepicker();
   icons: {
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-arrow-up",
                down: "fa fa-arrow-down"
            }
  });

</script>

Answer 1

您有多个具有相同 ID 的 div。这是不正确的。

<?php foreach($v as $k=>$n): ?>
<!--Body of the Modal for expired displays-->
<br>
<h6><?php echo $n['Type'] ?></h6>
<h6>Date/Time Expiring: <?php echo $n["Expiration"] ?></h6>
<h6>Set New Expiration:</h6>
  <div class="form-group">
    <div class="input-group date datetimepicker1" data-target-input="nearest">
      <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
      <span class="input-group-addon" data-target="#datetimepicker1" data-toggle="datetimepicker">
          <span class="fa fa-calendar"></span>
      </span>
    </div>
  </div>                 
<?php endforeach; ?>

<script type="text/javascript">
$(function () {
  $('.datetimepicker1').datetimepicker({
     icons: {
                  time: "fa fa-clock-o",
                  date: "fa fa-calendar",
                  up: "fa fa-arrow-up",
                  down: "fa fa-arrow-down"
              }
  });
});
</script>

Answer 2

Datepicker 不能针对 jQuery 集合运行，您需要使用 .each 回调进行循环。将“datetimepicker1”的所有 ID 更改为“datepicker”的类。

$(".datepicker").each(function(){
    $(this).datetimepicker();
});