jQuery 日期选择器在 IE8 中遇到问题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5454489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery datepicker having trouble in IE8?
提问by hillary
i did see a couple of similar threads, but later they turned out to be different issues...mine seems a browser specific problem surely because my datepicker works fine in Firefox, but certainly not in IE8. Here is my original problem and the source code
我确实看到了几个类似的线程，但后来证明它们是不同的问题......我的似乎是浏览器特定的问题，因为我的日期选择器在 Firefox 中工作正常，但在 IE8 中肯定不是。 这是我的原始问题和源代码
I updated my datepicker to jQuery UI Datepicker 1.8.11...still it just doesn't work in IE 8! The date-picker pops up just fine, but no event fires from it. I mean no click...nothing happens...
我将我的 datepicker 更新为 jQuery UI Datepicker 1.8.11 ......它仍然在 IE 8 中不起作用！日期选择器弹出得很好，但没有事件从中触发。我的意思是没有点击......没有任何反应......
Any ideas?
有任何想法吗？
回答by mahatmanich
Hey I don't know if you have solved that problem yet, however the problem is with any added attributes. Especially if you are using:
嘿，我不知道你是否已经解决了这个问题，但是问题在于任何添加的属性。特别是如果您正在使用：
yearRange: '-100:+10'
for example ...
例如 ...
This is how you resolve the issue: copied from http://satish.name/?p=19
这是您解决问题的方法：从http://satish.name/?p=19复制
jQuery datepicker adds a new attribute to the DOM element in IE. if you try to add a new DOM element dynamically copying from an existing element the datepicker will not work in IE as the newly added DOM element refers to the old jQuery attribute. One way to fix this is to delete the attribute and then instantiate the datepicker class on the element. See the following code for the fix.
jQuery datepicker 为 IE 中的 DOM 元素添加了一个新属性。如果您尝试从现有元素动态复制添加新 DOM 元素，则日期选择器将无法在 IE 中工作，因为新添加的 DOM 元素引用旧的 jQuery 属性。解决此问题的一种方法是删除该属性，然后在元素上实例化 datepicker 类。有关修复，请参阅以下代码。
//newDiv is the new added dom element with innerHTML
jQuery("#newDiv").find(".datePicker").each(function() {
//removing jquery added attribute as this is causing the dynamically
// added DOM elem referring old DOM element from it is copied.
if (jQuery.browser.msie) {
var jqaddedattr;
jQuery(this.attributes).each(function() {
if (this.name.search(/jQuery/) != -1) {
jqaddedattr = this;
}
});
if (jqaddedattr) {
jQuery(this).removeAttr(jqaddedattr.name);
}
}
jQuery(this).datepicker({yearRange: '-100:+10', changeFirstDay:false}).val("").trigger('change');
})
cheers
干杯
回答by Rob Willis
This is further information rather than an answer but unfortunately it was too long to add as a comment.
这是进一步的信息而不是答案，但不幸的是，作为评论添加的时间太长了。
The issue I see is that the DatePicker is displayed correctly but none of its events fire correctly (e.g. clicking dates or the month navigation does nothing).
我看到的问题是 DatePicker 显示正确，但没有一个事件正确触发（例如，单击日期或月份导航什么也不做）。
I have narrowed this issue down to a particular build of IE8 (v8.0.7600.16385) running on Windows 2008 R2 x64. We have other VMs on the same OS but with different builds of IE8 and this problem does not occur. We have not seen the issue on IE8 running on Windows XP, Vista, 2003 or 7. It also works fine in Firefox and Chrome.
我已将此问题缩小到在 Windows 2008 R2 x64 上运行的特定版本的 IE8 (v8.0.7600.16385)。我们在同一操作系统上有其他虚拟机，但具有不同的 IE8 版本，因此不会出现此问题。我们在 Windows XP、Vista、2003 或 7 上运行的 IE8 上没有看到这个问题。它在 Firefox 和 Chrome 中也能正常工作。
I have tried the fix referenced by mahatmanich but this did not resolve the issue (although we do not use the yearRange option).
我已经尝试了 mahatmanich 引用的修复程序，但这并没有解决问题（尽管我们不使用 yearRange 选项）。
I have also fully updated Windows (excluding IE9) but this did not update the IE8 version number or fix the issue.
我也完全更新了 Windows（不包括 IE9），但这并没有更新 IE8 版本号或解决问题。
Finally I updated jQuery to 1.7.1 and jQuery UI to 1.8.17 but neither update resolved the problem.
最后，我将 jQuery 更新到 1.7.1，将 jQuery UI 更新到 1.8.17，但是这两个更新都没有解决问题。
Does anyone have any other ideas or information?
有没有人有任何其他想法或信息？
回答by Alastair Pitts
This jsFiddle contains the most basic code to get a jQuery UI datepicker working on an <input type="text" />element.
这个 jsFiddle 包含最基本的代码来让一个 jQuery UI 日期选择器在一个<input type="text" />元素上工作。
I've confirmed that this runs on IE8, Chrome, Firefox.
我已经确认这可以在 IE8、Chrome、Firefox 上运行。
Can you test this as see if this works for you?
你能测试一下，看看这对你有用吗？
回答by Rong.l
I am now using jQuery DateTimePicker plugin v2.2.5. When it runs on IE8, the date-picker had no response when I was clicking on td elements of day.The click event seemed not to be fired. Then I went to console ,I found runtime error of datepicker script. A variable was null ,when others calling the function of it. After debug I found the variable was set to null in the follow codes.(I just set validateOnBlur to false in options to resolve the issue..)
我现在使用 jQuery DateTimePicker 插件 v2.2.5。当它在 IE8 上运行时，当我点击日期的 td 元素时，日期选择器没有响应。点击事件似乎没有被触发。然后我去控制台，我发现 datepicker 脚本的运行时错误。一个变量是 null ，当其他人调用它的函数时。调试后，我发现变量在以下代码中设置为 null。（我只是在选项中将 validateOnBlur 设置为 false 来解决问题..）
if( options.validateOnBlur ) {
input.off('blur.xdsoft')
.on('blur.xdsoft', function() {
if( options.allowBlank && !$.trim($(this).val()).length ) {
$(this).val(null);
//***************************************************
// After running of the following line, the variable
//_xdsoft_datetime.currentTime was setting to null.
// It seemed that the order of events fired not as
//expected.Valedate runned before the selected day value sets to input..
// So I just set validateOnBlur to false in options to resolve the issue..
datetimepicker.data('xdsoft_datetime').empty();
}else if( !Date.parseDate( $(this).val(), options.format ) ) {
$(this).val((_xdsoft_datetime.now()).dateFormat( options.format ));
datetimepicker.data('xdsoft_datetime').setCurrentTime($(this).val());
}
else{
datetimepicker.data('xdsoft_datetime').setCurrentTime($(this).val());
}
datetimepicker.trigger('changedatetime.xdsoft');
});
}
回答by bknopper
I had a similar issue. In my case, I had to click in the datetimepicker pop-up box once to get the focus and a second time to get the actual event fired in IE8.
我有一个类似的问题。就我而言，我必须单击 datetimepicker 弹出框一次才能获得焦点，第二次才能在 IE8 中触发实际事件。
Adding the following option when declaring the datetimepicker options solved my problem:
在声明 datetimepicker 选项时添加以下选项解决了我的问题：
validateOnBlur: false
回答by Ilc
I had the same problem. I couldn't change the month or the year, when it was open a datetimepicker over a jquery dialog.
我有同样的问题。当它通过 jquery 对话框打开日期时间选择器时，我无法更改月份或年份。
I can fix this problem adding a onShow listener that make focus over another input. This is my source code:
我可以通过添加一个 onShow 侦听器来解决这个问题，该侦听器将焦点放在另一个输入上。这是我的源代码：
$(".date").datetimepicker({
dayOfWeekStart : 1,
timepicker : false,
scrollMonth : false,
scrollInput : false,
format : 'd/m/Y',
formatDate : 'd/m/Y',
lang : 'es',
onShow : function() {
$('#anotherInput').focus();
},
});
