jQuery datepicker doesn't work properly due to the presence of a text input
===

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?

    <!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.arrow { height: 0px; width: 0px; position: absolute; display: inline-block; border-bottom: 5px solid transparent; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 5px solid white;  right: 8px; top: 12px; }

    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).end().find('div.arrow').css({borderTop:'5px solid white',borderBottom:'5px solid transparent',top:12});
    				$("#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 );
    				$( "#diva1" ).find("td a.ui-state-active").removeClass('ui-state-active');
    				$("div.toheader").css({borderRadius:'5px'}).find('span').text(selectedDate).end().find('div.arrow').css({borderTop:'5px solid white',borderBottom:'5px solid transparent',top:12});
    				$("#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'}).find('div.arrow').css({borderTop:'5px solid white',borderBottom:'5px solid transparent',top:12});
    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'}).find('div.arrow').css({borderBottom:'5px solid white',borderTop:'5px solid transparent',top:6}); }
    else {
    $("div#diva1").slideUp(300);
    $("div.fromheader").css({borderRadius:'5px'}).find('div.arrow').css({borderTop:'5px solid white',borderBottom:'5px solid transparent',top:12});
    fromclicked = 0;
     }
    }
    else {
    $("div#diva1").slideUp(300,function() { fromclicked = 0; });
    $(".fromheader").css({borderRadius:'5px'}).find('div.arrow').css({borderTop:'5px solid white',borderBottom:'5px solid transparent',top:12});
    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'}).find('div.arrow').css({borderBottom:'5px solid white',borderTop:'5px solid transparent',top:6}); }
    else {
    $("div#diva2").slideUp(300);
    $("div.toheader").css({borderRadius:'5px'}).find('div.arrow').css({borderTop:'5px solid white',borderBottom:'5px solid transparent',top:12});
    toclicked = 0;
     }
    }
    });
    
    
    });
    	</script>
    </head>
    <body>
    <div id = 'datecontainer'>
    <div class = 'dateheaders fromheader'>
    <span class = 'spandate'>Select a date</span>
    <div class = 'arrow'></div>
    </div>
    <div class = 'dateheaders toheader'>
    <span class = 'spandate'>Select a date</span>
    <div class = 'arrow'></div>
    </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!