Несколько сборщиков дат на одной странице

Question

Я использую kendo UI 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

Вы используете тот же 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();

должно работать.

Answer 2

$("#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 является уникальным именем.

Как указано в операторе другого решения, да, вы можете использовать имя класса для нескольких тегов и ссылаться на все теги по одному классу

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

, но я предлагаю вам,в вашем случае, так как вам приходится иметь дело с датами, чтобы не создавать конфликтов, лучше использовать уникальный идентификатор.

Простой, измените идентификатор и вызовите kendo lib as.

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