Several instances of a jQuery date picker

Question

Imagine that I had a form where I wanted to have a "rent date" and a "return date".

I want to use the calendar to make a pick.

However, my code is not working. I think it has something to do with both of them having same id but i do not want to rewrite a whole load of new CSS for each one that I need to use (around 4 currently).

<script type=”text/javascript”>
    jQuery(document).ready(function(){
        $( "#datepicker" ).datepicker();
                $( "#datepicker" ).datepicker2();
    });
</script> 

<div class="demo">
  <p>Date: <input id="datepicker" class="datepicker" type="text"></p>
</div>         <!-- End demo -->

<div class="demo">
  <p>Date: <input id="datepicker" class="datepicker" type="text"></p>
</div>         <!-- End demo -->

Can someone show me the completed code. i changed the ids and applied the code but still not working. — matthew moore, Mar 11 '11 at 18:56
You're still using the **wrong selector.** Use `$('.datepicker')` (the class selector) rather than `$('#datepicker')` (the ID selector). You're also calling `$('#datepicker').datepicker()` **four times**. You only need to call it **once.** Wake up, dude! — Matt Ball, Mar 11 '11 at 19:33
odd are you pulling cache cause i updated that all and still do not work — matthew moore, Mar 11 '11 at 19:53
I did a hard refresh but the page still has the wrong code. It did just change, however, but it's ***still*** running the initializer code multiple times (don't do that), and using the ID selector rather than the class selector. — Matt Ball, Mar 11 '11 at 19:57

score 6 · Accepted Answer · edited May 23 '17 at 12:33

6

HTML element IDs must be unique.

Use the class instead.

$( ".datepicker" ).datepicker();

If a document contains multiple elements with the same ID, ~~you will be eaten by velociraptors~~ ~~the Great Cthulhu will be summoned and consume the world~~ bad things will happen (as you've seen! :).

edited May 23 '17 at 12:33

Community

1
1

answered Mar 11 '11 at 18:11

Matt Ball

354,903
100
647
710

score 2 · Answer 2 · edited Feb 05 '14 at 15:55

2

If you have several elements with the same id then the selector will return only the first one.

What you should do is use the class selector to assign the datepicker.

I think this could work:

$(".datapicker").datepicker();

edited Feb 05 '14 at 15:55

Christoph Weigert

73
9

answered Mar 11 '11 at 18:12

willvv

8,439
16
66
101

No need for the `.each()` call. – Matt Ball Mar 11 '11 at 18:13

score 2 · Answer 3 · answered Mar 11 '11 at 18:12

You will have more problems with any javascript if you assign the same ID to multiple items on the page. You need to fixt that first.

An ID should be unique, otherwise you're going to have all kinds of things go wrong with the DOM which javascript/jquery use.

score 2 · Answer 4 · answered Mar 11 '11 at 18:14

2

No matter the way you see it, the ID's have to be unique

answered Mar 11 '11 at 18:14

Carlos Valenzuela

816
1
7
19

Several instances of a jQuery date picker

4 Answers4

HTML element IDs must be unique.