Question

我有一个php foreach循环，可以在一个模态中成功创建多个部分，每个部分都有自己的Datetimepicker。

我更改了datetimepicker以使用类而不是依赖于ID（我理解使用ID，foreach循环为每个datetimepicker提供相同的ID）

但是，现在，日历弹出窗口没有出现，但是当我点击日历按钮时，它会用今天的日期/时间填充所有的datepicker字段。

我需要修复此问题或找到一种方法来正确迭代循环，为每个datetimepicker提供自己的唯一ID并将其应用于脚本。

非常感谢任何帮助

<?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><!--  <input data-date-format="mm/dd/yyyy" id="datepicker" name="datepicker"> -->
  <div class="form-group">
    <div class="datepick input-group date" id="datetimepicker1" data-target-input="nearest">
      <input type="text" class="form-control datetimepicker-input" data-target=".datepick"/>
      <span class="input-group-addon" data-target=".datepick" data-toggle="datetimepicker">
          <span class="fa fa-calendar"></span>
      </span>
    </div>
  </div>                 
<a href="#" style="float:left;">View Display</a>
<br>
<hr>
<?php endforeach; ?>

<script type="text/javascript">
$(function () {
    $('.datepick').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>

更新代码：

<div class="form-group">
   <div class="datepick input-group date" id="datetimepicker<?php echo $k; ?>" data-target-input="nearest">
   <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker<?php echo $k; ?>"/>
   <span class="input-group-addon" data-target="#datetimepicker<?php echo $k; ?>" data-toggle="datetimepicker">
   <span class="fa fa-calendar"></span>
  </span>
 </div>
</div>  

<script type="text/javascript">
$(function () {
$('.datepick').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

您正在使用data-target=".datepick"，因此任何单个日期选择器都会定位该类的所有元素。

我会回滚到唯一ID。只需使用数组元素的键（$k）作为唯一标识符。类似的东西：

<div class="datepick input-group date" id="datetimepicker<?php echo $k; ?>" ...>

在foreach循环中创建具有唯一ID的输入字段

1 个答案: