Fixed – jQuery DatePicker not working in Thickbox

I’ve been struggling today for about an hour trying to get jQuery‘s DatePicker working in Thickbox. There appeared to be some kind of conflict. I tried hacking up the Datepicker plugin file, changing the z-index of the CSS but nothing. The date picker wasn’t even being called.

Eventually I found that other people were having the same problem, and a comment by Kevin Luck (the author of DatePicker) flicked my brain into gear.

The problem was that I was initialising the datepicker on page load, not on the loading of the thickbox content.

For example, at the start of the page the Thickbox was going to be loaded in I had this:

<script type="text/javascript">
	$(function(){
		// initiate date picker
		$('.pick-date').datePicker();
	});
</script>
</head>

However, I found that if I removed that from the head, and instead inserted it in the Thickbox content, e.g:

<div id="MyThickboxContent">
<script type="text/javascript">
	$(function(){
		// initiate date picker
		$('.pick-date').datePicker();
	});
</script>

It worked fine, problem solved!

  • http://www.insaned.net/ ivan

    Simple but effective solution… nice touch…

    • http://www.robsearles.com Rob Searles

      Thanks Ivan, glad you found my post useful.

  • http://www.insaned.net/ ivan

    Simple but effective solution… nice touch…

  • http://www.robsearles.com Rob Searles

    Thanks Ivan, glad you found my post useful.

  • arvindnee

    JQuery datepicker not working in thickbox.

  • arvindnee

    JQuery datepicker not working in thickbox.

  • Pingback: jQuery Validate URL, adding “http://”

  • eL-Prova

    Solution is simple.
    When the thickbox is showing, the function for initialize the datepicker can’t start. So use a timeout for 100.

    setTimeout(function(){
    $(‘#tb_datum’).datepicker({ dateFormat: ‘dd-mm-yy’ });
    }, 100);

  • eL-Prova

    Solution is simple.

    When the thickbox is showing, the function for initialize the datepicker can't start. So use a timeout for 100.

    setTimeout(function(){

    $('#tb_datum').datepicker({ dateFormat: 'dd-mm-yy' });

    }, 100);

  • eL-Prova

    Solution is simple.

    When the thickbox is showing, the function for initialize the datepicker can't start. So use a timeout for 100.

    setTimeout(function(){

    $('#tb_datum').datepicker({ dateFormat: 'dd-mm-yy' });

    }, 100);