Datepicker propogates click events
I have a form (in a div) which I hide and show based on certain events. Showing is working fine. The problem is that I want to hide the dialog if the user clicks anywhere outside the dialog, but leave the dialog showing as long as they are working inside the dialog. The way I do this is that I capture the click in the div containing the form and prevent propogation up the dom. I then have a click handler on the <body> which hides the div containing the form. The idea was that as long as the user clicked inside the form, the div would stop propogation of the clicks and the <body> tag wouldn't see them. Any clicks outside of the form would propogate up to the body and cause the div to hide (maybe there's a better way to do this?).
All this worked fine until I decided to use the datepicker to allow the user to pick the date. The problem is that the div which gets created to display the calendar must be getting created outside of the div containing the input element for the date. So, when the user clicks on the calendar, the click propogates up to the <body> and the form is closed--not the behavior I want.
I either need to find a different way to control the hiding of the div or figure out how to prevent the datepicker from propogating the click event or figure out how the body tag can tell the click event was from the datepicker or ??. Anyone have any suggestions?