Menu
I have recently encountered a problem in IE, using the jQuery UI datepicker script:
Load up a page with a datepicker on it, showing both the year and month dropdowns.
Select a date (this works fine first time).
Open the datepicker again, but this time, when you click on one of the year/month dropdown lists, it appears briefly and then disappears, requiring a second click to get it to appear correctly.
I have a small test page (see below) and have tested this using jQuery 1.4.4 and jQuery UI 1.8.10 (my production configuration) and jQuery 1.5.2 and jQuery UI 1.8.12 and been able to reproduce it in both cases (using IE9 and also in IE6).
<head>
<script type="text/javascript">
$(document).ready(function () {
$("#testDate").datepicker({changeYear:true,
changeMonth:true,
constrainInput:true,
buttonText:'Choose',
showOn:'both',
showButtonPanel:false,
buttonImageOnly:true});
});
</script>
</head>
<body>
<h2>Test</h2>
<input type="text" id="testDate" />
</body>
I've been trying to debug through the minified script that I have to see where this is happening, but I'm at a loss as to what is causing it.
421
Syntax: There are two forms of the usage of the jQueryUI datepicker() method. $ (selector, context). datepicker (options) Method.
inside the jQuery script code just paste the code. $( ". selector" ). datepicker({ dateFormat: 'yy-mm-dd' });
If you like to restrict access of users to select a date within a range then there is minDate and maxDate options are available in jQuery UI. Using this you can set the date range of the Datepicker. After defining these options the other days will be disabled which are not in a defined range.
Simply call . datepicker() on a div instead of an input. (To display the datepicker embedded in the page instead of in an overlay.) Save this answer.
If you look at the un-minified source here (1.8.12) the function in question is this:
/* Restore input focus after not changing month/year. */
_clickMonthYear: function(id) {
var target = $(id);
var inst = this._getInst(target[0]);
if (inst.input && inst._selectingMonthYear) {
setTimeout(function() {
inst.input.focus();
}, 0);
}
inst._selectingMonthYear = !inst._selectingMonthYear;
},
Removing the setTimeout() call stops the focusing problem in IE6 for me. Not sure what the side effect might be though. I've selected a few dates with a locally modified jquery-ui and it seems to still work OK in Chrome12 and IE6. Might be one for the jquery-ui team?
Edit Found the bug report - looks like it's scheduled for 1.8.3
104
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
