Search code examples
phpjquerycolorboxuidatepicker

Datepicker won't function inside colorbox


Here the scenario:
I want to apply a datepicker on a input field in a form.
When clicking a link a colorbox will open containing the form.

Somehow the datepicker doesn't work, so I searched the internet.
I was confused by this post datepicker inside a thickbox where the following statement was made: JavaScript/jQuery is not working inside of ColorBox.
It confused me because other people seem to have worked it out.

I'll show the code of the colorbox call:

        <script type="text/javascript">
        $(document).ready(function() {
                $(".customer").colorbox(
                {
                  transition:'fade',
                    width:'750',
                    speed:'500',
                    height:'400',
                    iframe:true
                });
        });
        </script>

The colorbox opens successfully although my error console says there is a } missing after the first }); occurrence.

The code for the datepicker:

<script type="text/javascript">$(document).ready(function() {
    $('.datepick').datepicker({
    changeYear:true,
    yearRange:'c-65:c+0',
    changeMonth:true
    });
    $('.datepick').datepicker($.datepicker.regional['nl']);});</script>

This code does work somewhere else on my website where it is not located in a colorbox.

What I have tried:

  1. I tried to give the class datepick a z-index of 10000 or higher since colorbox has a z-index of 9999 by default.
  2. I tried the oncomplete function() on the colorbox, but couldn't get the colorbox work when applied.
  3. I tried setting iframe to false in combination with the previous two options.

My question(s):

  1. Is it possible to have a datepicker working inside a colorbox?
  2. Is my code about the colorbox correct?
  3. How to fix it?!

UPDATE
Solution: I made a stupid mistake :P...
Yet I found the answers on my first question, which may be of some value.

  1. Yes it is possible to have a datepicker working inside a colorbox without using the onComplete:function().

Solution

  • Does your loaded iframe contain the datepicker instantiation code?

    My assumption is this:

    • you have an anchor with a class="customer"
    • this anchor has an href, which points the the page you want to show in the colorbox
    • this page loads in an iframe (due to iframe:true)
    • and this page doesn't have your datepicker instantiation code

    The easiest thing to do is to move the datepicker code to the onready function of the customer page.