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!