Пользовательский интерфейс JQuery, несколько датпикеров на одной странице

Я создаю сайт PHP для свойства. Я новичок в jQuery и jQuery UI, но не могу найти ответ нигде.

Смотрите этот снимок экрана ( полный размер ):

Скриншот

Для каждого поля «получено» и «истечения срока действия» я хочу, чтобы окно jQuery datePicker отображалось и форматировалось, как показано.

Чтобы проверить это, я попытался создать пример.

<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>

Что работает отлично, но как мне получить выбор даты, чтобы придумать ЛЮБОЕ текстовое поле, не повторяя JS столько раз.

Например, 50 свойств, на странице может быть 200 полей ввода с датой, которую необходимо заполнить.

Вот пример кода с экрана.

 <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>

Наверное, что-то действительно простое, я ценю любую помощь.

Я создаю класс CSS календаря и поддерживаю поведение каждого члена этого класса CSS следующим образом:

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

Вы должны настроить атрибут класса для каждого текстового поля

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

а потом

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

Если у вас есть только текстовые поля дат, вы можете присоединить datepicker для всех текстовых полей

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

Другой метод, только для вашей справки,

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

Для ЛЮБОГО текстового поля на странице:

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

для получения функциональных датпикеров в разных вводах на одной странице пользовательского сообщения с наименьшими проблемами и без хаоса с jquery-ui.css и jquery-ui.theme.css или с любым другим кодом библиотеки jQuery ui:

 <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">

В нижнем колонтитуле я запускаю функцию datepicker в функции, поскольку я использую wordpress, и эта страница находится в бэкэнде администратора, но вы можете просто использовать фрагмент javascript, если вы не используете 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'); ?>