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

【问题标题】：JQuery UI, multiple datepickers on single pageJQuery UI，单个页面上的多个日期选择器
【发布时间】：2011-06-21 11:15:23
【问题描述】：

我正在为财产创建一个 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>

可能很简单，感谢您的帮助。

【问题讨论】：

标签： php jquery user-interface

【解决方案1】：

我所做的是创建一个日历 CSS 类，并将行为附加到该 CSS 类的每个成员，如下所示：

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

【讨论】：

另一件事 JMP - 如何更改对齐方式？例如：i56.tinypic.com/2u5c6bp.png 覆盖盒子本身，是否可以将其移到右侧使其不覆盖盒子？
这个 SO 应该可以帮助你定位：stackoverflow.com/questions/662220/…
这有助于将日历弹出到所有输入字段。但我观察到 datepicker 所做的更改仅反映在类为 .calendar 的第一个输入中

【解决方案2】：

你应该为每个文本框设置类属性

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

然后

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

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

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

【讨论】：

【解决方案3】：

另一种方法，仅供参考，是

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

【讨论】：

谢谢，不知道它们也可以用逗号分隔。
没有问题。认为它可能会派上用场，即使您的问题有答案。

【解决方案4】：

对于页面上的任何文本框：

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

【讨论】：

小心副作用！当页面上有一个不需要日期选择器的文本框时会发生什么？
当然你是对的，最好使用 css 类，但他要求 ANY 文本框 ;-)
对不起，应该说明。 JMP 我将使用您的解决方案 :)

【解决方案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 并且此页面位于管理后端，但如果您不使用 wordpress，您可以只使用 javascript sn-p：

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

【讨论】：

【解决方案6】：

这对我有用...
PHP + jquery

$(function() {
    for(let i = 1; i<= <?php echo count($rows) ?>; i++)
    {
      $( "#datepicker-popup"+i ).datepicker({ dateFormat: 'yy-mm-dd' });
    }
  });

【讨论】：