title: Bootstrap (actually JQuery) DatePicker does not hide on blur in Wicket modal
body: <p>I have a wicket bootstrap <code>DateTextField</code> on a panel inside modal. When datepicker is shown from click, datepicker is attached to the root page, not the modal.</p>
  
  <p>That causes a problem: without adding some z-index to datepicker, I cannot see it on top of modal.</p>
  
  <p>When I blur from the picker, it should close. Somehow, due the fact the picker is not child of modal, clicking outside datepicker closes it only, if it is clicked outside the modal. Inside modal nothing happens.</p>
  
  <p>I can tweak this by autoclose, but when you go to input and manually use backSpace to clear the value, there is no a way to close datepicker by clicking somewhere inside the modal.</p>
  
  <p>Some html to make it clear:</p>
  
  <pre><code> &lt;html&gt;
     &lt;panel&gt;
       &lt;modal&gt;
         &lt;input&gt;datefield is here&lt;/input&gt;
       &lt;/modal&gt;
     &lt;panel&gt;
     &lt;datepicker comes here&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>How to get datepicker attached to modal, or somehow else fix the issue of blur inside the modal? </p>
  
  <p>I have tried to attach the panel a click event that hides datepicker, but it hides the datepicker right away when it opens.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>Click to modal does nothing, although html is moved artificially there and is placed correctly in DOM tree. Thanks to @Gavriel about insight to moving stuff between DOM elements, though.</p>
  
  <p><strong>Edit2:</strong></p>
  
  <p>Code to reproduce situation:</p>
  
  <pre><code>class MyPanel extends Panel {
      DateTextField field = new DateTextField("foo");
      (...)
      add(field);   
  }
  
  class MyPage extends WebPage {
       (...)
       ModalWindow modal = new ModalWindow("modal");
       modal.add(new MyPanel());
       (...)
  }
  
  html for the panel, containing the dateTextField
  
  &lt;html&gt;
     ..
     &lt;input wicket:id="foo"&gt;&lt;/input&gt;
     ..
  &lt;/html&gt;
  </code></pre>
  
  <p>As you see from snippet, java code generates the jQuery part.</p>
  
  <p><strong>Edit3:</strong></p>
  
  <p>I speak about this creature:</p>
  
  <p>[DateTextField sources] <a href="https://github.com/l0rdn1kk0n/wicket-bootstrap/blob/master/bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/form/DateTextField.java" rel="nofollow">https://github.com/l0rdn1kk0n/wicket-bootstrap/blob/master/bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/form/DateTextField.java</a></p>
  
  <p><strong>Edit4:</strong></p>
  
  <p>Hmm.. I added in Javascript a blur event listener inside the input in modal and that blur even did not work. So it turns out that the real question in hand is how to get onblur work inside modal. Because that is what is broken!! </p>
  
  <p><strong>Edit5:</strong></p>
  
  <p>Sorry, cannot give fiddle. From Edit3 you see sources I use for picker and what I really call is this function:</p>
  
  <pre><code>protected CharSequence createScript(final DateTextFieldConfig config) {
      return $(this).chain("datepicker", config).get();
  }
  </code></pre>
  
  <p>which is inside java class, so not JavaScript at all although syntax is looking so similar. For my understanding fiddles take no java code inside them. Wicket needs the java part, I am sorry about it.</p>
  
  <p>For fiddle askers I found similar situation on this fiddle: <a href="http://jsfiddle.net/VytfY/227/" rel="nofollow">http://jsfiddle.net/VytfY/227/</a> - works 100% ok, similar technologies I mention here, no use to my problem.</p>
  
  <p><strong>Last edit:</strong></p>
  
  <pre><code>$('html').on('click',function(e){
          if(e.target.className.indexOf('datepicker') == -1 &amp;&amp; 
             e.target.className != 'next' &amp;&amp; e.target.className != 'prev' &amp;&amp; 
             e.target.className != 'year' &amp;&amp; e.target.className != 'month'){
              if ($('.datepicker').get(0) != undefined){
                  $('.datepicker').get(0).remove();
              }
          }
       });
  </code></pre>
  
  <p>Thanks @Mathew you made my day, above is what it ended to be. I added to input element a class <code>datepickerContainer</code> so clicking it does not hide picker.</p>
  
  <p>Thanks folks, this is done!</p>
  
  <p><strong>One more: for IE, use:</strong></p>
  
  <pre><code> var canvas =  $('.datepicker').get(0);
   canvas.parentNode.removeChild(canvas);
  </code></pre>
  
  <p>instead of direct <code>remove</code>. <code>Remove</code> not yet supported, even IE11.</p>