jQuery 日历，ajax 按钮单击并准备就绪 - PHP jQuery BS-Calendar Ajax

Question

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

问题是我需要使用同一个日历与 id（即 #datetimepicker8 和 #datetimepicker9）五次。

换句话说，我正在尝试运行五次 for 循环，这将显示日历五次（包括从和到日期）。

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

这是我的完整代码： http://pastebin.com/80p18JXQ

<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/

对此的任何帮助将不胜感激。

谢谢， 金兹

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>