JavaScript в цикле php и включение Datetimepicker

Question

JavaScript в цикле php и включение Datetimepicker

Я использую datetimepicker javascript для начальной загрузки. Экземпляр работает, если есть только одно поле ввода или если оно первое из нескольких. Но если есть несколько полей, остальные не работают.

Виджет создается из цикла foreach в php, поэтому запись foreach дает новый раздел с заголовком, датой истечения срока действия и полем datetimepicker для создания новой даты. Однако, если я нажму на значок календаря 2-го или 3-го элемента выбора даты, он просто активирует всплывающий календарь для первого.

Как я могу правильно включить это в цикл, чтобы у каждого поля был свой ввод для 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>

0

datetimepicker javascript php

Решение

Другие решения

Datepicker не может быть запущен для коллекции jQuery, вместо этого вам нужно будет выполнить цикл с обратным вызовом .each. Измените все идентификаторы «datetimepicker1» на классы «datepicker».

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

0

Источник

Accepted Answer

У вас есть несколько div с одним и тем же 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>
<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>

0