次のコードを使用して、2 つのインライン日付ピッカーを使用して日付範囲を選択しています。2 つの日付フィールド (クラスdateheaderを持つdiv ) があります。日付を選択すると、その日付ピッカーが上にスライドします。基本的に、日付divがクリックされると、最初に、対応する日付ピッカーが ( fromclickedおよびtoclicked変数を介して) 既に表示可能であるかどうかがチェックされます。どちらかを行い、他の日付ピッカーを上にスライドさせ、対応するクリックを設定します属性を 0 に変更します。これで、コードの下部にテキスト入力ができました。除外すると、コードは期待どおりに正常に動作します。ただし、含まれている場合、コードが壊れます。つまり、1 つの日付divをクリックしてから日付ピッカーから日付を選択すると、正しくスライドアップします。次に、他の日付divをクリックすると、日付ピッカーは問題なく下にスライドしますが、日付を選択しても上にスライドしません。私は途方に暮れています。バグはどこですか？完全なコードは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 テーマ フォルダーを含めてください。
さらに更新すると、エラーはテキストまたはパスワード入力でのみ持続します。入力タイプをラジオまたはチェックボックスに変更すると、正常に機能します。コンソールにエラー ステートメントa is undefined が表示され、縮小された UI ファイルの datepicker js 部分の最初の行が示されます。