JQuery user interface, multiple date pickers on one page

Question

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

See this screenshot ( full size ):

For each received and expiry field, I want the jQuery datePicker window to be displayed and formatted 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 well, but how do I get a date picker to find ANY text field without repeating JS so many times.

For example, 50 properties may contain 200 input fields on a page with a date to be filled.

Here is an example of screen code.

 <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

I create a calendar CSS class and support the behavior of each member of this CSS class as follows:

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

Answer 2

You must set up a class attribute for each text field.

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

and then

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

Or, if you only have date text fields, you can attach a datepicker to all text fields

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

Answer 3

Another method, for your reference only, would be

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

Answer 4

For ANY text field on the page:

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

Answer 5

to get functional datepickers in different input boxes on one page of a custom message with the least problems and not to interfere with jquery-ui.css and jquery-ui.theme.css or any other jQuery ui library code

 <input class="datepicker" name="first_intake" id="first_intake" value="" size="30" type="date"> <input class="datepicker" name="second_intake" id="first_intake" value="" size="30" type="date"> 

In the footer, I run the datepicker function in the function since I use wordpress and this page is in the admin backend, but you can just use the javascript snippet if you are not using wordpress:

  <?php function my_admin_footer() { ?> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('#first_intake.datepicker').datepicker({ dateFormat : 'd M, yy' }); jQuery('#second_intake.datepicker').datepicker({ dateFormat : 'd M, yy' }); }); </script> <?php } add_action('admin_footer', 'my_admin_footer'); ?>