title: How to implement/mimic jQuery UI's datepicker?
body: <p>What I want to do is the following:</p>
  
  <p>I have an <code>&lt;input&gt;</code> element and <code>onclick</code> of that input, I toggle a certain <code>&lt;div&gt;</code> (please see below)</p>
  
  <pre><code>&lt;div&gt;
     &lt;table&gt;
        &lt;tr&gt;...&lt;/tr&gt;
        ...
        ...
     &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I click a row on the table above, I want to trigger an event (ex. put a certain value to <code>&lt;input&gt;</code> above and then hide the whole <code>&lt;div&gt;</code>. I have made it to work this far.</p>
  
  <p><strong>Issue:</strong> When the div is shown but <strong>NO</strong> <code>&lt;tr&gt;</code> was clicked (ex. the background is clicked), I want to hide the <code>&lt;div&gt;</code> this time also. So I put <code>onblur</code> event for the <code>&lt;input&gt;</code> and hides the div when this happens. This works.</p>
  
  <p><strong>Problem:</strong> BUT now, when I properly select a <code>&lt;tr&gt;</code>, the <code>onblur</code> is triggered FIRST, so the div and table gets hidden and no tr onclick is triggered. :(</p>
  
  <p><strong>My Solution so far:</strong> I removed the onblur event and made something like</p>
  
  <pre><code>$(document).mousedown(function() {
     If event.target == myDiv
        dont hide div, so onclick is triggered (manully hide later anyway)
     else //background is clicked
        hide div yey
  });
  </code></pre>
  
  <p><strong>Question:</strong> Is this a decent workaround? Or is there a better way? I want to know how jQuery UI implements this since I saw that datepicker is also a div. Sorry but my level of jQuery still does not allow me to properly read their implementation :/ If someone is kind enough to explain to me. Thank you.</p>