jQuery日期选择器与输入文本字段错误相关
[英]jQuery Date Picker tied up to an input text field error
问题描述
我正在jQuery中创建一个日期范围选择器，并将其绑定到输入文本字段。
代码如下：
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body style="font-size:62.5%;">
<form action="sample.php" method="post">
Start Date: <input type="text" name="startdate" id="datepicker"/>
End Date: <input type="text" name="enddate" id="datepicker"/>
<input type="submit" />
</form>
</body>
</html>
数据似乎在“开始日期”输入文本字段中有效。 当我选择开始日期字段时，日历出现：
但是，当我单击“结束日期”输入文本字段时，日历永远不会出现。 我需要使用该日历选择日期START和END。
我的代码一定有问题。 谁能告诉我？
谢谢！
5 个解决方案
解决方案1
3 已采纳 2012-03-19 07:46:55
Hiya因此，您有2个元素的开始日期和结束日期，且id = datepicker相同，这是不正确的。
参见以下示例： http : //jsbin.com/evudo
解：
请为两个输入框初始化，
$(document).ready(function() {
$("#start_datepicker").datepicker();
$("#end_datepicker").datepicker();
});
的HTML
Start Date: <input type="text" name="startdate" id="start_datepicker"/>
End Date: <input type="text" name="enddate" id="end_datepicker"/>
希望能有所帮助，欢呼
解决方案2
2 2012-03-19 07:49:21
您为两个元素都指定了相同的ID。元素的ID值在该文档中应该是唯一的。
<script>
$(document).ready(function() {
$("#datepicker1").datepicker(); });
$("#datepicker2").datepicker(); });
</script> </head>
<body style="font-size:62.5%;">
<form action="sample.php" method="post">
Start Date: <input type="text" name="startdate" id="datepicker1"/>
End Date: <input type="text" name="enddate" id="datepicker2"/>
<input type="submit" /> </form>
</body> </html>
或者您可以使用一个类，
<script>
$(document).ready(function() {
$(".datepicker").datepicker(); });
</script> </head>
<body style="font-size:62.5%;">
<form action="sample.php" method="post">
Start Date: <input type="text" name="startdate" class="datepicker"/>
End Date: <input type="text" name="enddate" class="datepicker"/>
<input type="submit" /> </form>
</body> </html>
解决方案3
2 2012-03-19 07:52:33
根据标准，ID应该是唯一的，请尝试更改开始日期和结束日期的ID。 或将id替换为class。
Start Date: <input type="text" name="startdate" class="datepicker"/>
End Date: <input type="text" name="enddate" class="datepicker"/>
$(document).ready(function() {
$(".datepicker").datepicker();
});
希望这可以帮助！
解决方案4
1 2012-03-19 07:46:59
两个输入字段都使用相同的ID。 尝试这个
Start Date: <input type="text" name="startdate" id="datepicker_start"/>
End Date: <input type="text" name="enddate" id="datepicker_end"/>
$(document).ready(function() {
$("#datepicker_start").datepicker();
$("#datepicker_end").datepicker();
});
解决方案5
0 2012-03-19 07:47:32
定义和用法id属性指定HTML元素的唯一ID（该值在HTML文档中必须是唯一的）。 来自W3schools
如果您想使用两个文本字段来设置日期范围，请尝试以下操作
var dates = j$( "#trdatefrom, #trdateto" ).datepicker({
changeMonth: true,
changeYear: true,
maxDate: new Date(),
dateFormat: "yy/mm/dd",
onSelect: function( selectedDate ) {
var option = this.id == "trdatefrom" ? "minDate" : "maxDate",
instance = j$( this ).data( "datepicker" ),
date =j$.datepicker.parseDate(
instance.settings.dateFormat ||
j$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
jQuery日期选择器没有在ajax生成的输入字段上工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.