爲什麼jQuery Datepicker不能處理兩個輸入值？

我試圖讓用戶輸入兩個不同的日期。我認爲使用日期選擇器是最容易的，jQuery Datepicker工作得很好，所以我決定使用它。我的問題是，第二個輸入不會像點擊應用一樣彈出日曆。爲什麼第二個輸入不會彈出日曆？爲什麼jQuery Datepicker不能處理兩個輸入值？

鏈接到jQuery的日期選擇器here

我的表格：

<?php require("variables.php"); ?> 

<div align="center"> 
    span style="font-size:60px;"> 
     enter>Audit Miles Update Page</center> 
    </span> 



    <form method="post" action="UpdateInfo_AM.php"> 
     <span style="font-size:40px;"> 
      <meta charset="utf-8"> 
      <title>jQuery UI Datepicker - Default functionality</title> 
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"> 
      <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
      <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script> 
      <link rel="stylesheet" href="/resources/demos/style.css"> 
      <script> 
       $(function() { 
        $("#datepicker").datepicker(); 
       }); 
      </script> 

     <p>As Of: <input type="date" name="AM_updated" id="datepicker"></p> 
     <p>Week: <input type="date" name="AM_week" id="datepicker"></p> 
     <u>Issued:</u> <input name="AM_issued" type="number" value= "<?php echo $row['AM_ISSUED']; ?>"; /><br/> 
     <u>Completed:</u> <input name="AM_completed" type="number" value="<?php echo $row['AM_COMPLETED']; ?>";/> <br/> 
     <input type="submit" value="Submit" /> 
    </form> 

</div>

來源

2014-07-10 Ryan_W4588

不要使用相同的'id'使用'class' instread –

您必須使用class來代替id的。

的ID必須在你的DOM獨特的（更多的信息：http://webdesign.about.com/od/css/f/blfaqmultiIDs.htm）

HTML：

<p>As Of: <input type="date" name="AM_updated" class="datepicker"></p> 
    <p>Week: <input type="date" name="AM_week" class="datepicker"></p>

的jQuery：

$(function() { 
    $(".datepicker").datepicker(); 
});

來源

2014-07-10 13:44:21

運行完美！爲什麼你必須改變jQuery部分？當我將'id'改爲'class'時，它不起作用。然而，當我改變和$（「＃datepicker」_。datepicker（）;'到'$（「.datepicker」）.datepicker（）;'它解決了這個問題。我試圖理解，而不是隻是反芻地笑！ –

jQuery代碼使用「＃」通過他的ID來定位一個元素，並使用「。」來定位類（具有某些行爲的多個元素 - 屬性相同）。更多信息，您可以訪問：http://stackoverflow.com/a/2031507/3747743和http://api.jquery.com/class-selector/ –

感謝Nicolas Henrard！我感謝幫助。 –

使用類，而不是ID。

<script> 
    $(function() { 
      $(".datepicker").datepicker(); 
    }); 
</script> 

<p>As Of: <input type="date" name="AM_updated" class="datepicker"></p> 
<p>Week: <input type="date" name="AM_week" class="datepicker"></p>

來源

2014-07-10 13:44:03 Marvin

所有id屬性必須是唯一的爲有效的HTML。此外，如果您的id屬性不唯一，jQuery將無法找到選擇器。爲了在這裏做你想做的事，最好的方法是使用class屬性來指定你的jQuery而不是id屬性。

<script> 
    $(function() { 
     $(".datepicker").datepicker(); 
    }); 
</script>

然後，只需指定類的標記......

<p>As Of: <input type="date" name="AM_updated" class="datepicker"></p> 
<p>Week: <input type="date" name="AM_week" class="datepicker"></p>

來源

2014-07-10 13:44:30

更改輸入id（日期選擇器）爲class

<script> 
    $(function() { 
     $(".datepicker").datepicker(); 
    }); 
</script> 

<p>As Of: <input type="date" name="AM_updated" class="datepicker"></p> 
<p>Week: <input type="date" name="AM_week" class="datepicker"></p>

DEMO

來源

2014-07-10 13:45:54

使用不同的ID爲元素輸入類型=「日期」/*您不能使用相同的ID，但類名可能是同一

<p>As Of: <input type="date" name="AM_updated" id="datepicker1"></p> 
<p>Week: <input type="date" name="AM_week" id="datepicker2"></p> 
<script> 
     $(function() { 
     $("#datepicker1").click(function(){ 
      $(this).datepicker();}) 
     $("#datepicker2").click(function(){ 
      $(this).datepicker();}) 
     }); 
</script>

來源

2014-07-10 13:46:29

爲什麼jQuery Datepicker不能處理兩個輸入值？

回答

相關問題