2

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.

caju
  • 179
  • 1
  • 11

2 Answers2

3

Problem appears because e.stopPropagation from selectbox prevents mousedown from being propagation to parent (from "html" used in selectbox to parent "document" used in date picker).

Problem can be solved by changing element affected by date picker. Instead of attach event to "document", it can be attached to "html" element (event will be executed because e.stopPropagation doesn't stop propagation on current level - both events will be attached to "html" element).

To fix problem, below code can be used:

   if (!!$.datepicker) {
        $(document).unbind('mousedown', $.datepicker._checkExternalClick);
        $('html').mousedown($.datepicker._checkExternalClick);
    };

It can be used in any js file (jquery.selectbox.js and jquery-ui.js don't have to be changed).

Diana28
  • 31
  • 5
2

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.

robocub
  • 259
  • 2
  • 10