Why won't jQuery Datepicker work on two input values?

Question

I am attempting to let users input two different dates. I figure it is easiest to use a datepicker, and jQuery Datepicker works perfectly fine, so I decided to use that. My problem is that the second input will not pop up the calendar when clicked, as it is supposed to. Why won't the second input pop up the calendar?

Link to jQuery Datepicker here

My Form:

    <?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>

don't use same `id` use `class` instread – Umesh Sehta Jul 10 '14 at 13:40 — Umesh Sehta, Jul 10 '14 at 13:40

score 1 · Accepted Answer · answered Jul 10 '14 at 13:44

1

You have to use class in place of id's.

ID's have to be unique in your DOM( more informations: 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();
});

answered Jul 10 '14 at 13:44

Nicolas Henrard

843
8
19

Works perfect! Why do you have to change the jQuery portion? When I changed just `id` to `class` it did not work. However, when I changed that AND `$("#datepicker"_.datepicker();` to `$( ".datepicker" ).datepicker();` it fixed the issue. Is there syntax here that I am not understanding? I'm trying to understand rather than just regurgitate lol! – Ryan_W4588 Jul 10 '14 at 13:47
1

The jQuery code use the "#" to target an element by his ID and use a "." for targetting classes (multiple elements with some behaviours - properties in common) For more informations, you can visit: http://stackoverflow.com/a/2031507/3747743 and http://api.jquery.com/class-selector/ – Nicolas Henrard Jul 10 '14 at 13:57
Thanks Nicolas Henrard! I appreciate the help. – Ryan_W4588 Jul 10 '14 at 13:58
Awesome, super useful info for a beginner haha. Accepted yours as answer because you were first. – Ryan_W4588 Jul 10 '14 at 14:05

score 0 · Answer 2 · answered Jul 10 '14 at 13:44

Use class instead of 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>

score 0 · Answer 3 · answered Jul 10 '14 at 13:44

All id attributes must be unique for valid HTML. Furthermore, jQuery cannot locate the selector if your id attributes are not unique. In order to do what you want here, the best method would be to use a class attribute to specify your jQuery instead of an id attribute.

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

Then just assign the class to your markup...

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

score 0 · Answer 4 · answered Jul 10 '14 at 13:45

Change input id (datepicker) into 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

Anshuman Singh · Answer 5 · 2014-07-10T13:52:00.327

use different id for element input type="date" /* you cant use same id ,but class name could be same

<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>

Why won't jQuery Datepicker work on two input values?

5 Answers5