title: bootstrap twitter datepicker + modal - calendar coming up in parent screen instead of modal screen
body: <p>I have a form (<code>Payment.php</code>) which I am displaying in a modal screen using twitter bootstrap. 
  In the form I have a date field for which I found <a href="http://www.eyecon.ro/bootstrap-datepicker/">this</a> bootstrap plugin.</p>
  
  <p>But the problem is the calendar is loaded in the parent screen (<code>Index.php</code>) and not on the modal form where it is actually required. </p>
  
  <p>Can anyone suggest a solution to this.</p>
  
  <p>Following is the code that I have tried.</p>
  
  <p>Imports:</p>
  
  <pre><code>&lt;link href="css/bootstrap.css" rel="stylesheet"&gt;
  &lt;link href="css/datepicker.css" rel="stylesheet"&gt;
  &lt;script src="js/bootstrap-datepicker.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery-1.8.0.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>PHP:</p>
  
  <pre><code>&lt;div class="controls"&gt;
          &lt;input data-datepicker="datepicker" class="span3" value="2012-09-13" data-date-format="yyyy-mm-dd" id="dp2" &gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('#dp2').datepicker();
  </code></pre>