jQuery Datepicker: doesn't work on initial focus

JavaScript
1

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:


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

      <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!

2

I’m not sure why that wouldn’t work, but I noticed that you keep doing this:


var self = jQuery(this);
jQuery(self)...

There’s no need to use the extra variable self. The only reason you would need to do that is if you need a reference to what ‘this’ currently points to because you want to use it in a context where ‘this’ is set to something else. That’s not the case here, so you don’t need to do that. Unless of course you want to type ‘self’ rather than having to type jQuery(this) repeatedly, in which case you don’t need to wrap self in a call to the jQuery() function since it’s already set equal to a jQuery object.

3

I hear you; it was kind of a “belt and suspenders” approach, just in case something unforeseen was happening elsewhere. :slight_smile:

4

Oh ok, I see.

I guess my only other suggestion would be that I just noticed you’re using outdated versions of both jQuery and jQuery UI, which are now in versions 1.6.2 and 1.8.14, respectively, compared to the versions you have, which are 1.4.2 and 1.7.3, respectively.

The outdated jQuery version probably isn’t affecting anything (though upgrading it is probably a good idea anyway), but there may be a bug related to the problem you’re having in the jQuery UI code which may be fixed in the current version of jQuery UI. So I’d suggest you update to the latest version of jQuery UI first and see if you’re still having the same problem.