php JQuery UI，单个页面上的多个日期选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4900101/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery UI, multiple datepickers on single page
提问by Matt
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.
我正在为财产创建一个 PHP 站点。我是 jQuery 和 jQuery UI 的新手，但似乎无法在其他任何地方找到答案。
Please see this screen shot (full size):
请查看此屏幕截图（全尺寸）：
For for every "received" and "expiry" box I want a jQuery datePicker box to appear and format as shown.
对于每个“已接收”和“到期”框，我希望显示一个 jQuery datePicker 框并按所示设置格式。
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>
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.
哪个工作正常，但是如何让日期选择器出现在任何文本框上，而不必多次重复 JS。
For say, 50 properties, there may be 200 input boxes on the page with a date needing to be filled in.
比如50个属性，页面上可能有200个输入框需要填写日期。
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.
可能真的很简单，我感谢任何帮助。
回答by JMP
What I do is create a calendar CSS class and have the behavior attached to each member of that CSS class like so:
我所做的是创建一个日历 CSS 类，并将行为附加到该 CSS 类的每个成员，如下所示：
$( ".calendar" ).datepicker({ dateFormat: 'yy-mm-dd' });
回答by Distdev
You should set up class attribute for each text box
您应该为每个文本框设置类属性
<input class="datepicker" type="text" />
and then
进而
$( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
Or if you have only dates textboxes, you can attach datepicker for all textboxes by
或者，如果您只有日期文本框，则可以通过以下方式为所有文本框附加日期选择器
$( 'input[type="text"]' ).datepicker({ dateFormat: 'yy-mm-dd' });
回答by Scott Brown
Another method, just for your reference, would be
另一种方法，仅供您参考，是
$("#datepicker, #datepicker2").datepicker({ dateFormat: 'yy-mm-dd' });
回答by acme
For ANY textbox on the page:
对于页面上的任何文本框：
$('input[type="text"]').datepicker({ dateFormat: 'yy-mm-dd' });
回答by doris pelger
to get functional datepickers on different input boxes on the same page of a custom post with the least hassle and without messing with the jquery-ui.css and jquery-ui.theme.css or any other code of the jQuery ui library:
以最少的麻烦在自定义帖子的同一页面上的不同输入框中获取功能日期选择器，并且不会弄乱 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">
In the footer I initiate the datepicker in a function as I use wordpress and this page is in the admin backend, but you can just use the javascript snippet, if you do not use wordpress:
在页脚中，我在一个函数中启动日期选择器，因为我使用 wordpress 并且此页面位于管理后端，但是如果您不使用 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');
?>
