同一页面中的多个datepicker不起作用 [英] multiple datepicker in same page not working javascript
本文介绍了同一页面中的多个datepicker不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
日期选择器功能。问题是如果我添加多行，然后单击日期选择器它不能正常工作。请参阅 http://jsfiddle.net/KN7Hd/ 进行演示。 $（function（）{
$（#datepicker）.datepicker（{
showOn ：button，
buttonImage：images / calendar.png，
buttonImageOnly：true，
showOtherMonths：true，
selectOtherMonths：true
}）;
}）;
如何解决这个问题？
解决方案
看下面的例子：
< input type =textclass =datepickid =date_1/>
< input type =textclass =datepickid =date_2/>
< input type =textclass =datepickid =date_3/>
脚本：
code> $（'。datepick'）。each（function（）{
$（this）.datepicker（）;
}）;
完整代码：
< html>
< head>
<！ - jQuery JS包含 - >
< script type =text / javascriptsrc =jquery / jquery-1.3.2.js>< / script>
< script type =text / javascriptsrc =jquery / ui / ui.core.js>< / script>
< script type =text / javascriptsrc =jquery / ui / ui.datepicker.js>< / script>
<！ - jQuery CSS Includes - >
< link type =text / csshref =jquery / themes / base / ui.core.css =stylesheet/>
< link type =text / csshref =jquery / themes / base / ui.datepicker.css =stylesheet/>
< link type =text / csshref =jquery / themes / base / ui.theme.css =stylesheet/>
<！ - 安装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>
<！ - 每个输入字段都需要唯一的ID，但都需要是datepicker - >
< p>日期1：< input id =oneclass =datepickertype =textreadonly =true>< / p>
< p>日期2：< input id =twoclass =datepickertype =textreadonly =true>< / p>
< p>日期3：< input id =threeclass =datepickertype =textreadonly =true>< / p>
< / body>
< / html>
I used add row delete row functionality in my form. I have a date field with date picker functionality. 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.
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.png",
buttonImageOnly: true,
showOtherMonths: true,
selectOtherMonths: true
});
});
How to fix this?
解决方案
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>
这篇关于同一页面中的多个datepicker不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
