JQuery UI，单页上的多个日期选择器

Question

我正在为属性创建一个PHP站点。我是jQuery和jQuery UI的新手，但似乎无法在其他任何地方找到答案。

请参阅此截屏（full size）：

对于每个“已收到”和“到期”框，我想要一个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' });

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

在页脚中，我在函数中启动了datepicker，因为我使用的是wordpress，此页面位于admin后端，但如果你不使用wordpress，你可以使用javascript片段：

    <?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');
?>