CODEWITHSUNDEEP
jqueryjquery-uidatepicker
matthew moore
matthew moore

Reputation: 215

Several instances of a jQuery date picker

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

Upvotes: 0

Views: 980

Answers (4)

willvv
willvv

Reputation: 8639

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();

Upvotes: 2

Matt Ball
Matt Ball

Reputation: 359776

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! :).

Upvotes: 6

Carlos Valenzuela
Carlos Valenzuela

Reputation: 834

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

Upvotes: 2

polyhedron
polyhedron

Reputation: 1590

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.

Upvotes: 2

Related Questions