{"id":1056,"date":"2013-08-27T10:05:53","date_gmt":"2013-08-27T20:05:53","guid":{"rendered":"http:\/\/mymonkeydo.com\/?p=1056"},"modified":"2013-08-27T10:05:53","modified_gmt":"2013-08-27T20:05:53","slug":"fancybox-and-datepicker-error","status":"publish","type":"post","link":"https:\/\/mymonkeydo.com\/fancybox-and-datepicker-error\/","title":{"rendered":"Fancybox and Datepicker Error"},"content":{"rendered":"
Using fancybox and datepicker I got an “a is undefined” javascript error. \u00a0I added datepicker to the fancybox by using the following code: \u00a0<\/p>\n
\n\n$('#fancybox-wrap').on('focusin', '.datepicker', function(e) {\n$(this).datepicker();\n });\n\n<\/pre>\nThis caused the datepicker to show up correctly, but when selecting a date it closed the fancybox modal while leaving the greyed background.<\/p>\n
<\/p>\n
Solution<\/h2>\n
I am always amazed at how often I find solutions on StackOverflow. \u00a0Even if the OP didn’t have my exact problem, the solution given solved my problem. \u00a0 Because fancybox (in general all lightboxes) duplicates the DOM datepicker gets confused on which calendar modal to close. \u00a0The solution is as follows: <\/p>\n
\n\n$('#fancybox-wrap').on('focusin', '.datepicker', function(e) {\n$(this).attr("id","datepickerNEWID");\n$(this).datepicker();\n });\n\n<\/pre>\n