多个jquery datetime作为表单字段不起作用

Question

当我创建只有一个“日期时间”字段的表单时：

<input type="text" id="datepicker">

没关系，但是当我以相同的形式将“日期时间”字段相乘时：

<input type="text" id="datepicker">
<input type="text" id="datepicker">

这不起作用。 JQuery datepicker 仅适用于第一个输入，第二个不显示。什么是问题？

在我的主布局页面中：

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="{$basePath}/js/main.js"></script>

在我的 main.js 中：

$('#datepicker').datepicker({dateFormat: "yy-m-d"});

Answer 1

更改您的代码以使用类：

<input type="text" class="datepicker">
<input type="text" class="datepicker">

然后执行你的脚本：

$('.datepicker').datepicker({dateFormat: "yy-m-d"});

或使用不同的 ID：

<input type="text" id="datepicker">
<input type="text" id="datepicker2">

然后执行你的脚本：

$('#datepicker, #datepicker2').datepicker({dateFormat: "yy-m-d"});

Answer 2

你不能有两个具有相同 id 的 DOM 元素。您可以改用类：

<input type="text" class="datepicker">
<input type="text" class="datepicker">

在 main.js 中：

$('.datepicker').datepicker({dateFormat: "yy-m-d"});

Answer 3

您根本不能拥有同名的 ID。将它们更改为类或为您的 id 使用唯一名称

Answer 4

您的两个输入表单域具有相同的 ID。给第二个一个不同的 ID，比如 datepicker2，然后你可以使用那个 ID 在那个字段上调用 ​​datpicker。

$('#datepicker2').datepicker({dateFormat: "yy-m-d"}); // The second datepicker

除了使用 ID，您还可以使用类名：

<input type="text" class="datepicker">
<input type="text" class="datepicker">

 $('.datepicker').datepicker({dateFormat: "yy-m-d"}); // All datepickers with class "datepicker"