How to implement/mimic jQuery UI's datepicker?

Question

What I want to do is the following:

I have an <input> element and onclick of that input, I toggle a certain <div> (please see below)

<div>
   <table>
      <tr>...</tr>
      ...
      ...
   </table>
</div>

When I click a row on the table above, I want to trigger an event (ex. put a certain value to <input> above and then hide the whole <div>. I have made it to work this far.

Issue: When the div is shown but NO <tr> was clicked (ex. the background is clicked), I want to hide the <div> this time also. So I put onblur event for the <input> and hides the div when this happens. This works.

Problem: BUT now, when I properly select a <tr>, the onblur is triggered FIRST, so the div and table gets hidden and no tr onclick is triggered. :(

My Solution so far: I removed the onblur event and made something like

$(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
});

Question: 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.

Answer 1

Do something like

someTimeout = setTimeout(function(){ someFunction(); }, someDuration) 

$("#someID").click(function() {
   clearTimeout(someTimeout );
});