Jquery datepicker does not work inside lightbox

Question

After some problems solved, I got a tricky stuff. I am using an overlay plugin for JQuery called prettyPhoto.

Just wanna make an overlay with a form. The form is hid

Answer 1

with lightbox doest not work. This is because the lightbox always enforce focus on itself.

var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

$confModal.on('hidden', function() {
    $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
});

Answer 2

Using the solution proposed here I manage to make the datepicker appear/disapear in a lightbox (prettyphoto) BUT still with a javascript error (f is null) when selecting a date.

After couple of hours here's my complete solution :

$("#datepicker").live('focus', function(){ 
                 $(this).attr("id","datepickerNEWID");                 
                 $(this).datepicker();
});

Because lightbox creates a new DOM with a copy of the div content we then have 2 input with same ID that causes datepicker to not work so what I do is change the datepicker id.

Hope it helps!

Answer 3

Your overlay plugin 'prettyPhoto' create a new DOM everytime it is triggered, so the 'focus' event that datepicker is bounded to, does not exist on the DOM element in your lightbox.

Here is one person who had the same problem:

jQuery live() failing with jQuery UI datepicker

You'll probably need something like this:

$('#overlayData').live('click', function (){
  $(this).datepicker({dateFormat: 'dd/mm/yy'});
});

Answer 4

after looking into your codes, here's what I found.

It seems that you binded the datepicker correctly on the popup form. The problem is, when you initialize the prettyphoto, the binded datepicker is not anymore binded. If you can look at firebug and watch closely on <div id="pp_full_res"></div>, that's where your form goes. What happen now, is when you open/close the popup, the form gets remove or added to the DOM. That's the problem.

One solution I can think is for you to use another overlay plugin.