Using jQuery datepicker with Facebox

Facebox is an interesting jquery plugin but it’s also one of those annoying things on the web that likes to break stuff around it.  For my current project, I needed to use jQuery’s datepicker plugin with facebox. As expected, facebox broke datepicker :(.  I wanted to try several other implementations but since jQuery’s datepicker was the simplest one I could find, I didn’t want to waste time trying make another script work.  So I took a few minutes to debug my problem.

The problem:

Turns out that datequery relies on an elements ID.  The problem?  Facebox duplicates all the contents of the div you wanted to display and all hell breaks loose.

The solution:

Quite simple actually.

Just use jQuery to replace the element id within facebox at run time.

Here’s the script:

$(document).bind('reveal.facebox', function() {
  $('#facebox .datepicker').each( function(intIndex){
    $(this).attr('id',jQuery(this).attr('id') + '-2')

Then just modify your binding for datepicker accordingly:

$(document).bind('reveal.facebox', function() {

And you’re done. 😀

I found this code using google-fu on


  1. hi
    i used the same code donsn’t work the bind is very old and jquery is replaced with $ so if you have some time please update this article thanks 🙂

  2. hi, this is just what i want to do!! but i don’t understand where i must put the code 🙁
    i’m new in jquery… please, can you send me a .zip file with an example page what load facebox with a input field text with a datepicker selector? i’ll appreciate it! then i modify for my target! sorry for my english…

    • hi i am rajeshkannan
      i need to do facebox with datepicker.
      If you have any examples can you give me.
      Thanks in advance

  3. You saved all of my hair, thank you 😀

  4. Man, thank u very much … you saved me a lot of time.

Leave a Reply

Your email address will not be published. Required fields are marked *