Question

我正在为我的项目实施这个日历。 http://eonasdan.github.io/bootstrap-datetimepicker/

问题是我需要使用带有id的相同日历（即＃datetimepicker8和＃datetimepicker9）五次。

换句话说，我正在尝试运行for循环五次，这将显示日历五次（使用from和to date）。

为了缩短这一点，我有五行（在for循环中运行），其中包含From和To日期，用户将选择From Date和To Date。

<script type="text/javascript">
$(function () {
$('#datetimepicker8').datetimepicker();
$('#datetimepicker9').datetimepicker();
$("#datetimepicker8").on("dp.change",function (e) {
$('#datetimepicker9').data("DateTimePicker").setMinDate(e.date);
});
$("#datetimepicker9").on("dp.change",function (e) {
$('#datetimepicker8').data("DateTimePicker").setMaxDate(e.date);
});
});
</script>

<table>
<tr><td>
<div class="col-sm-3">
<div class="input-group date" id="datetimepicker8" style="width: 150px;" tabindex="2">
<input class="form-control" name="from_date" type="text">
<span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i></span></div>
</div></td>
<td>
<div class="col-sm-3">
<div class="input-group date" id="datetimepicker9" style="width: 150px;" tabindex="2">
<input class="form-control" name="to_date" type="text">
<span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i> </span> </div>
</div></td></tr>

<tr><td>
<div class="col-sm-3">
<div class="input-group date" id="datetimepicker8" style="width: 150px;" tabindex="2">
<input class="form-control" name="from_date" type="text">
<span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i></span></div>
</div></td>
<td>
<div class="col-sm-3">
<div class="input-group date" id="datetimepicker9" style="width: 150px;" tabindex="2">
<input class="form-control" name="to_date" type="text">
<span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i> </span> </div>
</div></td></tr>
</table>

我也在jsfiddle中添加了代码，这里是链接http://jsfiddle.net/965XJ/1/

对此的任何帮助都会很明显。

谢谢， Kimz

Answer 1

HTML的规则编号1，您不能为多于一个元素使用相同的ID。这就是他们称之为ID的原因。

您可以使用类初始化日期选择器并使用jquery查找下一个最接近的选择器。见this fiddle。请注意我已添加的其他课程。

$('.date').datetimepicker();

$(".from_date").on("dp.change", function (e) {
    $(this).nextAll(".to_date").data("DateTimePicker").setMinDate(e.date);
});

$(".to_date").on("dp.change", function (e) {
    $(this).prevAll(".from_date").data("DateTimePicker").setMaxDate(e.date);
});

<强> HTML

<div class="input-group date from_date" style="width: 150px;" tabindex="2">
    <input class="form-control" name="from_date" type="text" /> <span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i></span>

</div>
<div class="input-group date to_date" style="width: 150px;" tabindex="2">
    <input class="form-control" name="to_date" type="text" /> <span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i> </span>

</div><br/>
<!-- padding for jsfiddle -->
<div class="input-group date from_date" style="width: 150px;" tabindex="2">
    <input class="form-control" name="from_date" type="text" /> <span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i></span>

</div>
<div class="input-group date to_date" style="width: 150px;" tabindex="2">
    <input class="form-control" name="to_date" type="text" /> <span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i> </span>

</div><br/>
<!-- padding for jsfiddle -->
<div class="input-group date from_date" style="width: 150px;" tabindex="2">
    <input class="form-control" name="from_date" type="text" /> <span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i></span>

</div>
<div class="input-group date to_date" style="width: 150px;" tabindex="2">
    <input class="form-control" name="to_date" type="text" /> <span class="input-group-addon"><i class="glyphicon-calendar glyphicon"></i> </span>

</div>

jQuery日历，ajax按钮单击和onready - PHP jQuery BS-Calendar Ajax

1 个答案: