Question

I think this is not working because its performing the mouseout on the input. But how would I select the current instance of the datepicker to add the hide method?

$("input.datePicker").datepicker().mouseout(function() {
    $(this).datepicker("hide");    
});

Answer 1

You need to target the datepicker class itself as the selector:

$('.ui-datepicker').mouseleave(function(){
    $("input.datePicker").datepicker('hide').blur()

});

Since the datepicker is dynamically generated this needs to be called after initialization of the widget.

Working demo: http://jsfiddle.net/nBmcY/2/

EDIT: Added trigger blur of input also so user can immediately click same field if mistake made.