Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Open jQuery Datepicker in Facebox
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/facebox.css" type="text/css" media="all" />
</head>
<body>
<p><a href="#yourmom" rel="facebox">Open Facebox</a></p>
<div id="yourmom" style="display: none;">
<input id="datepicker" class="datepicker" />
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="js/facebox.js"></script>
<script>
$(function () {
$('a[rel*=facebox]').facebox();
$('#facebox .datepicker').datepicker();
// http://stackoverflow.com/questions/2386718/jquery-live-failing-with-jquery-ui-datepicker
$('.datepicker').live('click', function () {
$(this).datepicker('destroy').datepicker({showOn: 'focus'}).focus();
});
// http://www.frenzicmojo.net/2009/11/fun-with-jquery-datepicker-and-facebox/
jQuery(document).bind('reveal.facebox', function() {
jQuery('#facebox .datepicker').each( function(intIndex){
jQuery(this).attr('id',jQuery(this).attr('id') + '-2')
});
});
});
</script>
</body>
</html>
@rajeshkannanmani

This comment has been minimized.

Copy link

@rajeshkannanmani rajeshkannanmani commented Apr 12, 2013

is this problem fixed ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment