html - Datepicker 图标不会出现在输入文本框旁边

Question

正如您在下面的 JS Fiddle 中看到的那样，我只能让小的 Datepicker 图标出现在其中一个输入框旁边。我需要它出现在两者旁边。

但是，将 'id' 更改为 'class' 不起作用，并导致两个图标都消失。

http://jsfiddle.net/Vzt39/

HTML:

           <title>jQuery UI Datepicker - Icon trigger</title>

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>


      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

      <script>
      $(function() {
        $( "#datepicker" ).datepicker({
          showOn: "button",
          buttonImage: "calendar.gif",
          buttonImageOnly: true
        });
      });
      </script>



    <p>Date: <input type="text"  id="datepicker" /></p>
     <p>Date: <input type="text" id="datepicker" /></p>


CSS:


  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />


  <link rel="stylesheet" href="/resources/demos/style.css" />

Answer 1

您应该更改id为class，然后更改$("#datepicker")为$(".datepicker")，因为标识符应该是唯一/不同的。

然后，将您的 jQuery 代码包装到$(document).ready(function(){ /*...*/ });其中以确保在执行 javascript/jQuery 代码时在 DOM 中创建 html 元素。

结果将如下所示：

<script>
$(document).ready(function() {
    $( ".datepicker" ).datepicker({
          showOn: "button",
          buttonImage: "calendar.gif",
          buttonImageOnly: true
     });
});
</script>

<p>Date: <input type="text" class="datepicker" /></p>
<p>Date: <input type="text" class="datepicker" /></p>

这是一个工作小提琴：http: //jsfiddle.net/GJHuf/1/

Answer 2

  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      showOn: "button",
      buttonImage: "calendar.gif",
      buttonImageOnly: true
    });
      $( "#datepicker2" ).datepicker({
      showOn: "button",
      buttonImage: "calendar.gif",
      buttonImageOnly: true
    });    
  });
  </script>