JQuery UI, multiple datepickers on single page

Question

I'm creating a PHP site for property. I'm new to jQuery and jQuery UI but can't seem to find the answer anywhere else.

Please see this screen shot (full size):

For for every "received" and "expiry" box I want a jQuery datePicker box to appear and format as shown.

To test this I tried to create an example.

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="Stylesheet" />    
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>

<script>
    $(function() {
        $( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
        $( "#datepicker2" ).datepicker({ dateFormat: 'yy-mm-dd' });
    });
</script>
<style>
.ui-datepicker {
  font-size: 80%;
}
</style>

<p>Date: <input id="datepicker" type="text" /></p>
<p>Date2: <input id="datepicker2" type="text" /></p>

Which works fine, but how do I get a date picker to come up for ANY textbox without having to repeat the JS so many times.

For say, 50 properties, there may be 200 input boxes on the page with a date needing to be filled in.

Here is some example code from the screen shot.

<tr>
  <td>Property ID</td>
  <td>House Number</td>
  <td>Address Line 1</td>
  <td>Gas Expiry</td>
  <td>Gas Received</td>
  <td>Electric Expiry</td>
  <td>Electric Received</td>
  <td>Property Active</td>
  <td>Update</td>
</tr>

<tr>
  <td>4</td>
  <td>6</td>
  <td>East Street</td>
  <td><input name="gas_expiry[4]" type="text" id="gas_expiry[4]" value="2011-08-03" /></td>
  <td><input name="gas_received[4]" type="text" id="gas_received[4]" value="" /></td>
  <td><input name="electric_expiry[4]" type="text" id="electric_expiry[4]" value="" /></td>

  <td><input name="electric_received[4]" type="text" id="electric_received[4]" value="" /></td>
  <td>
    <select name="active[4]" id="active[4]">
      <option value="0" selected="selected">No</option>
      <option value="1">Yes</option>
    </select>
  </td>
  <td><input name="edit[]" type="checkbox" id="edit[]" value="4" /></td>

</tr>

Probably something really simple, I appreciate any help.

Answer 1

What I do is create a calendar CSS class and have the behavior attached to each member of that CSS class like so:

$( ".calendar" ).datepicker({ dateFormat: 'yy-mm-dd' });

Answer 2

You should set up class attribute for each text box

<input class="datepicker" type="text" />

and then

$( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });

Or if you have only dates textboxes, you can attach datepicker for all textboxes by

$( 'input[type="text"]' ).datepicker({ dateFormat: 'yy-mm-dd' });

Answer 3

Another method, just for your reference, would be

$("#datepicker, #datepicker2").datepicker({ dateFormat: 'yy-mm-dd' });