我使用以下代码使用2个内联日期选择器选择日期范围。有两个日期字段（ div ，类 dateheader ）。选择日期后，该日期选择器会向上滑动。基本上，当日期 div 点击时，首先检查相应的日期选择器是否已经可见（通过 fromclicked 和 toclicked < / strong>变量），如果存在，则将其向上滑动，否则将其向下滑动，相应地更改相应的单击属性，在执行任何操作之前，向上滑动另一个日期选择器并设置其相应的单击属性为0.现在代码底部有一个文本输入。当它被排除时，代码正常，正如预期的那样。但是如果包含它，则代码会中断，即如果您单击一个日期 div ，然后从日期选择器中选择一个日期，它将正确向上滑动。然后，如果您点击其他日期 div ，则日期选择器会向下滑动，但选择日期不会将其向上滑动。我没办法。这个bug在哪里？完整的代码位于http://jsfiddle.net/Cupidvogel/2ppYb/（我无法包含UI-CSS文件，但即使是没有样式的版本就足够了！）。
<!DOCTYPE html>
<html>
<head>
<style>
.dateheaders {
background: black;
width: 120px;
height: 28px;
position: absolute;
top: 0px;
left: 33px;
border-radius: 5px;
cursor: pointer;
display: inline-block;
z-index: 55;
}
.toheader {
left: 216px
}
.spandate {
color: white;
}
div#diva1 {
width: 190px;
position: absolute;
display: none;
z-index: 10;
outline: none;
}
div#diva2 {
width: 190px;
position: absolute;
display: none;
z-index: 10;
outline: none;
}
#datecontainer {
position: relative;
width: 400px;
height: 30px;
background: red;
top: 60px;
left: 40px;
}
</style>
<link type="text/css" href="ui-darkness/ui.css" rel="stylesheet"
/>
<script src="jquery.js"></script>
<script type="text/javascript" src="ui.minified.all.js"></script>
<script>
$(function () {
fromclicked = 0;
toclicked = 0;
$("#diva1").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
maxDate: "+0D",
onSelect: function (selectedDate) {
fromclicked = 0;
$("#diva2").datepicker("option", "minDate", selectedDate);
$("div.fromheader").css({
borderRadius: '5px'
}).find('span').text(selectedDate)
});
$("#diva1").slideUp(300);
}
});
$("#diva2").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
maxDate: "+0D",
onSelect: function (selectedDate) {
toclicked = 0;
$("#diva1").datepicker("option", "maxDate", selectedDate);
$("div.toheader").css({
borderRadius: '5px'
}).find('span').text(selectedDate).end()
});
$("#diva2").slideUp(300);
}
});
$("body").css({
fontSize: '16px'
});
$("div.ui-datepicker-inline").css({
fontSize: '62.5%',
left: '-50px',
borderRadius: '0px 10px 10px 10px'
});
$(".dateheaders").click(function () {
$top = $(this).offset().top + $(this).height() - 1;
$left = $(this).offset().left;
if ($(this).hasClass('fromheader')) {
$("div#diva2").slideUp(300, function () {
toclicked = 0;
});
$(".toheader").css({
borderRadius: '5px'
})
});
if (!fromclicked) {
fromclicked = 1;
$("div#diva1").appendTo("body").css({
display: 'block',
top: $top,
left: $left
}).slideUp(0).slideDown(300, function () {
$(this).focus();
});
$("div.fromheader").css({
borderRadius: '5px 5px 0px 0px'
})
});
} else {
$("div#diva1").slideUp(300);
$("div.fromheader").css({
borderRadius: '5px'
})
});
fromclicked = 0;
}
} else {
$("div#diva1").slideUp(300, function () {
fromclicked = 0;
});
$(".fromheader").css({
borderRadius: '5px'
})
});
if (!toclicked) {
toclicked = 1;
$("div#diva2").appendTo("body").css({
display: 'block',
top: $top,
left: $left
}).slideUp(0).slideDown(300, function () {
$(this).focus();
});
$("div.toheader").css({
borderRadius: '5px 5px 0px 0px'
})
});
} else {
$("div#diva2").slideUp(300);
$("div.toheader").css({
borderRadius: '5px'
})
});
toclicked = 0;
}
}
});
});
</script>
</head>
<body>
<div id='datecontainer'>
<div class='dateheaders fromheader'>
<span class='spandate'>Select a date</span>
</div>
<div class='dateheaders toheader'>
<span class='spandate'>Select a date</span>
</div>
<div id='diva1'></div>
<div id='diva2'></div>
</div>
<input id='boombada' type="text" size="23" value="" />
</body>
</html>
请包含核心jQuery UI文件（包括大约202 KB大小的所有内容）和UI-darkness主题文件夹以查看结果！
进一步更新，错误仅在输入文本或密码时仍然存在，如果您将输入类型更改为radio或checkbox，它可以正常工作。控制台显示错误语句 a未定义，并指向缩小的UI文件中的datepicker js部分的第一行。