Lately I have a messed problem that daterangepicker not function correctly on fancybox v. 2.1.5 (modal).

The problem is daterangepicker works fine on parent page, but not work on fancybox dialog. The calendar not showing, no error in console. I guess there is something not in the right place.

My keywords to searching for the answer  is “bootstrap daterangepicker fancybox” and not find any related answer so I try myself to use option “parentEl” of daterangepicker which seems for something and still not work, apparently I don’t know how to use it since there is no example or much explanation.

I’m finding a solution for a day, without any of daterangepicker explanation on the document how to use the option “parentEl”.  Not even mention that it is for use with modal. Would you say poor documentation?

The very short description says:

parentEl: (string) jQuery selector of the parent element that the date range picker will be added to, if not provided this will be ‘body’

So after reading the problem all over the internet, found that the modal have to use option “parentEl” but still don’t know how since there is no example. I have tried it myself several ways.

Here is my solution

add a script in the ajax file that loads inside fancyBox so it will be loaded right after the form.

<input type="text" name="date" id="date" value="" class="fancyBoxDateRangePicker">


$(document).ready(function(){
$('.fancyBoxDateRangePicker').daterangepicker({
"parentEl": ".fancybox-overlay",
});

The input with daterangepicker has a css class name “fancyBoxDateRangePicker”  (use your own) and the class “fancybox-overlay” is the default css class in fancyBox so you don’t have to do anything with that.

Then after you use this, still one more problem that the calendar layer will be loaded under the fancybox modal so you have to add style to override.

.daterangepicker.dropdown-menu {
max-width: none;
z-index: 99999 !important;
}

Then one more problem, if the parent screen scroll, you can add more style to fix it

.fancybox-lock {
overflow: visible !important;
}

Hope this will help your problem 😀