jQuery 同一页面中的多个日期选择器不起作用javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22828440/
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
multiple datepicker in same page not working javascript
提问by marsweb
I used add row delete row functionality in my form. I have a date field with date pickerfunctionality. The problem is if i add more than one row and then click date picker it is not working properly. Please see this http://jsfiddle.net/KN7Hd/for demo.
我在表单中使用了添加行删除行功能。我有一个具有date picker功能的日期字段。问题是，如果我添加多于一行，然后单击日期选择器，则它无法正常工作。请参阅此http://jsfiddle.net/KN7Hd/进行演示。
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.png",
buttonImageOnly: true,
showOtherMonths: true,
selectOtherMonths: true
});
});
How to fix this?
如何解决这个问题？
回答by Systematix Infotech
Take a look in below example:
看看下面的例子：
<input type="text" class="datepick" id="date_1" />
<input type="text" class="datepick" id="date_2" />
<input type="text" class="datepick" id="date_3" />
Script:
脚本：
$('.datepick').each(function(){
$(this).datepicker();
});
Complete code:
完整代码：
<html>
<head>
<!-- jQuery JS Includes -->
<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="jquery/ui/ui.datepicker.js"></script>
<!-- jQuery CSS Includes -->
<link type="text/css" href="jquery/themes/base/ui.core.css" rel="stylesheet" />
<link type="text/css" href="jquery/themes/base/ui.datepicker.css" rel="stylesheet" />
<link type="text/css" href="jquery/themes/base/ui.theme.css" rel="stylesheet" />
<!-- Setup Datepicker -->
<script type="text/javascript"><!--
$(function() {
$('input').filter('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: 'jquery/images/calendar.gif',
buttonImageOnly: true
});
});
--></script>
</head>
<body>
<!-- Each input field needs a unique id, but all need to be datepicker -->
<p>Date 1: <input id="one" class="datepicker" type="text" readonly="true"></p>
<p>Date 2: <input id="two" class="datepicker" type="text" readonly="true"></p>
<p>Date 3: <input id="three" class="datepicker" type="text" readonly="true"></p>
</body>
</html>
回答by Ye Maung Maung
<script type="text/javascript">
$(document).on('focus', '.datepicker',function(){
$(this).datepicker({
todayHighlight:true,
format:'yyyy-mm-dd',
autoclose:true
})
});
</script>
<input type="text" class="datepicker" />
<input type="text" class="datepicker" />
<input type="text" class="datepicker" />
