jQuery UI，在单个页面上有多个日期选择器 [英] JQuery UI, multiple datepickers on single page

问题描述

我正在为财产创建一个PHP网站.我是jQuery和jQuery UI的新手，但似乎在其他任何地方都找不到答案.

I'm creating a PHP site for property. I'm new to jQuery and jQuery UI but can't seem to find the answer anywhere else.

请查看此屏幕截图(全尺寸):

Please see this screen shot (full size):

对于每个已接收"和到期"框，我希望显示一个jQuery datePicker框并按如下所示设置格式.

For for every "received" and "expiry" box I want a jQuery datePicker box to appear and format as shown.

为了测试这一点，我尝试创建一个示例.

To test this I tried to create an example.

<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多次的情况下为任何文本框提供日期选择器.

Which works fine, but how do I get a date picker to come up for ANY textbox without having to repeat the JS so many times.

例如，有50个属性，页面上可能有200个输入框，需要填写日期.

For say, 50 properties, there may be 200 input boxes on the page with a date needing to be filled in.

这是屏幕截图中的一些示例代码.

Here is some example code from the screen shot.

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

可能很简单，我非常感谢您的帮助.

Probably something really simple, I appreciate any help.

推荐答案

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

What I do is create a calendar CSS class and have the behavior attached to each member of that CSS class like so:

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

这篇关于jQuery UI，在单个页面上有多个日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！