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

您应该为每个文本框设置class属性

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

然后

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

或者,如果您只有日期文本框,则可以为所有文本框附加日期选择器

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