Jquery selectBox conflict with jquery ui datepicker

My datepicker plugin dosen't close if I use jquery selectBox plugin. The code I using:

jQuery( document ).ready(function( $ )
{
  $(".date-field input").datepicker
  ({ 
    dateFormat: "yy/mm/dd",
    minDate: "2012/03/01",
    maxDate: "0d",
    dayNamesMin: [ "Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab" ],
    dayNames: [ "Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado" ],
    monthNames: ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"],
    showOptions: { direction: "up" },
    showAnim: "drop",
    duration: 300
  });

  $(".select-field select").selectbox({effect:"slide",speed:400});

});

I am using the latest jquery library and the only necessary plugins to use datepicker with the drop effect.

The problem is if I use the selectbox, the Datepicker dosen't close on click out. I already tried noConflict without sucess. If I select a date in the Datepicker closes normally.

OBS on the page I have two fields for datepicker.

Solution

Selectbox plugin causes this problem by cancelling event bubbling on <html>.

Find the following block in selectbox.js:

$("html").on('mousedown', function (e) {
    e.stopPropagation();
    $("select").selectbox('close');
});

You have 2 options here. Either remove e.stopPropagation(); line or add $(".date-field input").datepicker("hide"); below it.