jQuery UI Datepicker Example #1 (works)

Created For: http://stackoverflow.com/q/10961976/352449

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css">
The status below shows if the mouse is considered to be inside the blue box<br>
or outside the blue box based on jQuery's mouseenter & mouseleave.<br>
The problem is that the datepicker triggers a mouseleave.

<div class="wrapper">
    <input type="text" value="" id="datepicker">
</div>
    
<div id="status">Status: Mouse is INSIDE</div>

CSS

.wrapper {
    width:350px;
    height: 350px;
    background-color:blue;
}

JavaScript

$("#datepicker").datepicker({});

$(".wrapper")
.mouseenter(function(){
    $("#status").html("Status: Mouse is INSIDE");
})
.mouseleave(function(){
    $("#status").html("Status: Mouse is OUTSIDE");
});