This is frustrating! I'm using the stock jQuery UI Datepicker; it will open on click, but not on focus. What's strange is, if I tab through the entire page and come around to the target field again, it <em>does</em> open! Here's my HTML:

Code HTML4Strict:
                    <ul>
                        <li class="black bold">
                            <label for="datepickX" class="labelDatefield">Select activation date for [ProductX]:</label>
<input type="text" id="datepickX" class="datefield" />
<span class="spanConfirmDate" style="font-weight: normal; font-style: italic;"></span> 
                        </li>
                        <li class="black bold end">
                            <label for="datepickY" class="labelDatefield">Select activation date for [ProductY]:</label>
<input type="text" id="datepickY" class="datefield" />
<span class="spanConfirmDate" style="font-weight: normal; font-style: italic;"></span> 
                        </li>
                    </ul>

...And here's the JavaScript:

Code JavaScript:
      <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
      <!-- Add JavaScript for jQuery datepicker -->
      <script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js"></script>
 
      <script type="text/javascript">
        jQuery(document).ready(function(){
            /* jQuery datepicker functions */
            jQuery('.labelDatefield').focus(function() {
                var self = jQuery(this);
                jQuery(self).next('input').datepicker({numberOfMonths:2});
            });
            jQuery('.labelDatefield').click(function() {
                var self = jQuery(this);
                jQuery(self).next('input').datepicker({numberOfMonths:2});
            });
            jQuery('input.datefield').focus(function() {
                jQuery(this).datepicker({numberOfMonths:2});
            });
            jQuery('.datefield').mousedown(function() {
                var self = jQuery(this);
                jQuery(self).datepicker({numberOfMonths:2});
            });
            jQuery('.datefield').keydown(function() {
                var self = jQuery(this);
                jQuery(self).datepicker({numberOfMonths:2});
            });
            jQuery('.datefield').change(function() {
                var self = jQuery(this);
                if (jQuery(self).val().length == 10) {
                    var strVal = 'This software will be activated on ' + jQuery(self).val() + '.';
                    jQuery(self).next('span').html(strVal);
                } else {
                    jQuery(self).next('span').html('Please click in the field and use the dropdown calendar to pick a date.');
                }
            });
            /* end jQuery datepicker functions */
});
</script>

I'm stumped; any suggestions? TIA!