Javascript JQuery日期选择器在第一个实例之后不工作

Javascript JQuery日期选择器在第一个实例之后不工作,javascript,jquery,jquery-ui,datepicker,Javascript,Jquery,Jquery Ui,Datepicker,我找不到任何似乎能回答为什么我的日期选择器不能在同一页上工作多次的答案。以下是我正在使用的代码,为了清晰易读,删除了大部分正文内容: <html> <head> <!-- Load jQuery from Google's CDN --> <!-- Load jQuery UI CSS --> <link rel="stylesheet" href="http://code.jquery.com/

我找不到任何似乎能回答为什么我的日期选择器不能在同一页上工作多次的答案。以下是我正在使用的代码,为了清晰易读,删除了大部分正文内容:

<html>
  <head>
    <!-- Load jQuery from Google's CDN -->        
    <!-- Load jQuery UI CSS  -->
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

    <!-- Load jQuery JS -->
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <!-- Load jQuery UI Main JS  -->
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <!-- Load SCRIPT.JS which will create datepicker for input field  -->
    <script src="script.js"></script>

    <link rel="stylesheet" href="runnable.css" />
  </head>
  <body>
    <p>Pick a Date: <input type="text" id="datepicker" /></p>
    <p>Pick a Date: <input type="text" id="datepicker" /></p>
    <p>Date:<input type="text" id="datepicker" /></p>
  </body>

选择一个日期:

选择一个日期:

日期:

谁能告诉我为什么它只适用于第一个实例,而不适用于第二个实例


谢谢

您有多个实例的
id
datepicker
,这是无效的HTML<代码>id应为唯一字段

如果要应用于多个,请将其设置为类:

<input type="text" class="datepicker" />
这将解决无效HTML和多实例问题


作为一点额外的信息,它只适用于第一个实例的原因是,jQuery中的ID选择器在找到第一个(以及应该是唯一的)匹配项后停止在DOM中查找元素。

ID必须是唯一的。我不知道我自己怎么看不到重复的ID。我并不是一直在用HTML工作(讽刺)。我已经按照你的建议申请了这门课,效果很好。谢谢如果它解决了问题,不要谢我。。。谢谢你的复选标记我正在计划,但我再过几分钟就不能接受这个答案了。
$('.datepicker').datepicker();