同一页面中有多个日期选择器

Question

我正在使用kendo UI datepicker，我想使用一个具有相同ID的函数在同一个页面中放置多个datepicker，但我不想更改，第一个输入已经存在于我的页面，但其他页面是动态添加的，有关如何解决该问题的任何建议？

$("#datepicker").kendoDatePicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="datepicker">
<br>
<br>
<input id="datepicker">
<br>
<br>
<input id="datepicker">

Answer 1

$("#datepicker").kendoDatePicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="datepicker1">
<br>
<br>
<input id="datepicker2">
<br>
<br>
<input id="datepicker3">

问题是您在多个实例上使用相同的ID，这不是一个好选择。它本身的页面不会出现任何错误，但是当您调用一个通过id引用它的标签时，它会在第一个假设默认情况下id是唯一名称的位置停止。

如其他解决方案上的op所建议的，是的，您可以在多个标签上使用类名，并且可以按单个类引用所有标签

$(".datepicker_class").kendoDatePicker();

但是我建议您，因为您必须处理日期而不产生冲突，所以最好使用唯一ID。

简单，更改id并将kendo lib称为。

$("#datepicker1").kendoDatePicker();
$("#datepicker2").kendoDatePicker();
$("#datepicker3").kendoDatePicker();

Answer 2

您使用的是相同的id，并且找到第一个匹配项时选择器将停止。由于您要收集物品，因此将输入更改为mydatepicker class：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="mydatepicker">
<br>
<br>
<input class="mydatepicker">
<br>
<br>
<input class="mydatepicker">

现在，我想

$(".mydatepicker").kendoDatePicker();

应该工作。