multiple javascript date picker

Question

I am building and web page in php and all the content is laid out like so ..

<div>
<form>
<input type='text' id='datepick' />
</form>
</div>

<div>
<form>
<input type='text' id='datepick' />
</form>
</div>

<div>
<form>
<input type='text' id='datepick' />
</form>
</div>

Its layout is a bit more complex really but basically the problem I am having is that the datepick id calls the datpick function but it only works on the first input and ignores the rest. I cant give them there own ids all the inputs must be called the same.

This is the function

<script type="text/javascript">

        new datepickr('datepick', {
            'dateFormat': 'd-m-Y'
        });
</script>

Can any one tell me how to make the datepick work on all input fields.

Thanks in advance, I am proper struggling with this one ....

Answer 1

Look at the example here on how to use it:

http://www.joshsalverda.com/sandbox/date_pick/datepickr.html (from https://code.google.com/p/datepickr/ )

You must give them all their own id.

HTML spec requires id to be unique but it will still render the page for you. Which element will be found when you look for a non-unique id in undefined. It might be the first, it might be the last, you might get an error.

Answer 2

or just change the id to class like mentioned:

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

<p>Date: <input type="text" class="datepicker" /></p>
<p>Date: <input type="text" class="datepicker" /></p>
<p>Date: <input type="text" class="datepicker" /></p>

works fine.