Imagine that I had a form where I wa开发者_运维百科nted 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 -->

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

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.

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

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