I am using the following code to select a date range using 2 inline datepickers. There are two date fields (div, with class dateheader). When a date is selected, that datepicker slides up. Basically when the date div is clicked, first it is checked whether the corresponding datepicker is already viewable (through the fromclicked and toclicked variables), if present, then slide it up, else slide it down, changing the corresponding clicked attribute accordingly, and before doing either, sliding the other datepicker up and setting its corresponding clicked attribute to 0. Now there is a text input at the bottom of the code. When it is excluded, the code works fine, as expected. However if it is included, the code breaks, i.e if you click one date div, then select a date from the datepicker, it will slide up correctly. Then if you click the other date div, the datepicker will slide down alright, but selecting a date won't slide it up. I am at my wit's end. Where is the bug? The complete code is at http://jsfiddle.net/Cupidvogel/2ppYb/ (I couldn't include the UI-CSS files, but even the unstyled version is enough!).
<!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>
Please include the core jQuery UI file (which includes everything, around 202 KB size) and the UI-darkness theme folder to see the results!
Further updation, the error persists only with text or password input, if you change the input type to radio or checkbox, it works fine. Console shows an error statement a is undefined, and points out to the first line of the datepicker js part in the minified UI file.