Datepicker圖標不會出現在輸入文本框旁邊

Question

正如您在下面的JS提琴中所看到的，我只能看到其中一個輸入框旁邊出現小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

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

Answer 2

你應該改變id到class，並改變$("#datepicker")到$(".datepicker")，因爲標識符都應該是獨一無二的/不同。

然後，將您的jQuery代碼包裝到$(document).ready(function(){ /*...*/ });中，以確保在執行javascript/jQuery代碼時在html中創建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/