Question

I have many inputs on one page that are dates and I am using Jquery datepicker.

If a user clicks on one input box, the datepicker calender shows up fine, but if the user goes from that input to a different input box without first clicking out, or first choosing a date from the first one, the datepicker calendar will now show up.

Does anyone have any idea how to fix this? Thank you in advance for any responses.

Edit2: http://jsfiddle.net/H5rev/2/ Click on bottom one and then click on middle one for an example. Thank you.

Edit: Here is some code. I have about 15 of them but here is JS and html for the fist five.

js:

 $("#ctl00_ContentPlaceHolder2_tbxDeed1").datepicker({ showButtonPanel: true,  showAnim: "fold" });
        $("#ctl00_ContentPlaceHolder2_tbxDeed2").datepicker({ showButtonPanel: true, showAnim: "fold" });
        $("#ctl00_ContentPlaceHolder2_tbxDeed3").datepicker({ showButtonPanel: true, showAnim: "fold" });
        $("#ctl00_ContentPlaceHolder2_tbxDeed4").datepicker({ showButtonPanel: true, showAnim: "fold" });
        $("#ctl00_ContentPlaceHolder2_tbxDeed5").datepicker({ showButtonPanel: true, showAnim: "fold" });

Html:

                    <tr><td style="text-align:right; padding-right:5px; vertical-align:middle;">Closer sent deed</td><td><input type="text" runat="server" id="tbxDeed1" class="closingText" maxlength="10" /></td></tr>
                    <tr><td style="text-align:right; padding-right:5px; vertical-align:middle;">Deed received</td><td><input type="text" runat="server" id="tbxDeed2" class="closingText" maxlength="10" /></td></tr>
                    <tr><td style="text-align:right; padding-right:5px; vertical-align:middle;">Deed sent for exec.</td><td><input type="text" runat="server" id="tbxDeed3" class="closingText" maxlength="10" /></td></tr>

Answer 1

I fixed it. I was using the animation “fold”. Apparently this has the bug I have asked about. Changing it to slideDown has fixed the issue.

Thank you everyone.