My Monkey Do

A Log of Coding Solutions

Fancybox and Datepicker Error

by

Problem

Using fancybox and datepicker I got an “a is undefined” javascript error.  I added datepicker to the fancybox by using the following code:  

$('#fancybox-wrap').on('focusin', '.datepicker', function(e) {
$(this).datepicker();
 });

This caused the datepicker to show up correctly, but when selecting a date it closed the fancybox modal while leaving the greyed background.

 

Solution

I am always amazed at how often I find solutions on StackOverflow.  Even if the OP didn’t have my exact problem, the solution given solved my problem.   Because fancybox (in general all lightboxes) duplicates the DOM datepicker gets confused on which calendar modal to close.  The solution is as follows: 

$('#fancybox-wrap').on('focusin', '.datepicker', function(e) {
$(this).attr("id","datepickerNEWID");
$(this).datepicker();
 });

http://stackoverflow.com/questions/3392961/jquery-datepicker-does-not-work-inside-lightbox