CODEWITHSUNDEEP
javascriptjquerydatedatepicker
Bugge
Bugge

Reputation: 15

JQuery Datepicker - displaying date in several fields

I'm having a list with several activities, and I want the jQuery Datepicker to display the date in a field in each row. At the moment I'm able to display the date in the first row, but it seem like it only will display in one field with id="date" at a time. The field in each row look like this:

<td><input id="date" name="date" /></td>

So, what I'm wondering: Is there a way I can display the date in every input field with id="date"?

Upvotes: 0

Views: 57

Answers (3)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

As an alternative, taking your list as example

<ul id="listDisp">
    <li>
        Activity 1<input type="text" id="datePicker1"/>
    </li>
    <li>
        Activity 2<input type="text" id="datePicker2"/>
    </li>
    <li>
        Activity 3<input type="text" id="datePicker3"/>
    </li>    
</ul>

and your js would be

$("#listDisp").find('input').datepicker();

OR

$("#listDisp input").datepicker();

Here is FIDDLE

Upvotes: 0

Jules
Jules

Reputation: 295

Following what @TrueBlueAussie said, you can do :

$( ".your_class" ).each(function() { //You access all your elements with the class "your_class"
  //Do STG, you can access the current element with $(this)
});

Upvotes: 1

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93611

ids must be unique on a page. Use a class instead to identify the elements.

The reason is that browsers maintain a fast-lookup dictionary of id value vs element and there is only one entry per value available in a dictionary.

To use a class

<td><input class="date" name="date" /></td>

and target with $(".date").datepicker(); instead of $('#date').datepicker()

JSFiddle: http://jsfiddle.net/TrueBlueAussie/D4AGz/485/

Upvotes: 4

Related Questions