Question

我试图让用户输入两个不同的日期。我认为使用datepicker最简单，jQuery Datepicker工作得非常好，所以我决定使用它。我的问题是第二个输入在点击时不会弹出日历，正如它应该的那样。为什么第二个输入不会弹出日历？

链接到jQuery Datepicker 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>

Answer 1

你必须使用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();
});

Answer 2

使用class而不是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>

Answer 3

对于有效的HTML，所有id属性必须是唯一的。此外，如果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>

Answer 4

将输入id（datepicker）更改为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

Answer 5

为元素输入类型使用不同的id =＆＃34; date＆＃34; / *您不能使用相同的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>

为什么jQuery Datepicker不能处理两个输入值？

5 个答案: