JQuery UI, несколько сборщиков дат на одной странице

Question

Я создаю сайт 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>

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

Answer 1

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

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

Answer 2

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

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

, а затем

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

Или, если у вас есть только текстовые поля с датами, вы можете прикрепить средство выбора даты для всех текстовых полей с помощью

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

Answer 3

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

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

Answer 4

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

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

Answer 5

, чтобы получить функциональные средства выбора даты в разных полях ввода на одной и той же странице пользовательского сообщения с наименьшими хлопотами и без лишних хлопот с 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">

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