javascript 避免在选择日期后重新打开日期选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13010463/
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
Avoid reopen datepicker after select a date
提问by Webman
Only in IE with this code
仅在带有此代码的 IE 中
$('#datepicker').datepicker({
onSelect : function(x, u){
$(this).focus();
}
});
when I select a date, the datepicker reopen itself because I added $(this).focus();in onSelect. How I can to resolve this issue? (Example)
当我选择一个日期时，日期选择器会重新打开，因为我$(this).focus();在onSelect. 我该如何解决这个问题？（示例）
I'm using jquery 1.8.2 and jquery-ui 1.9
我正在使用 jquery 1.8.2 和 jquery-ui 1.9
采纳答案by A. Wolff
This is the best workaround i can get:
这是我能得到的最好的解决方法：
(inspired from this link)
（灵感来自此链接）
$('#datepicker').datepicker({
/* fix buggy IE focus functionality */
fixFocusIE: false,
onSelect: function(dateText, inst) {
this.fixFocusIE = true;
$(this).change().focus();
},
onClose: function(dateText, inst) {
this.fixFocusIE = true;
this.focus();
},
beforeShow: function(input, inst) {
var result = $.browser.msie ? !this.fixFocusIE : true;
this.fixFocusIE = false;
return result;
}
}).click(function(){$(this).focus()});
Please note as you suggested in your question, im using jquery-UI 1.9.0. In your sample, you were using jquery-ui 1.8.15 which is known to be buggy on some events (e.g beforeShow() on IE).
请注意，正如您在问题中所建议的，我使用的是 jquery-UI 1.9.0。在您的示例中，您使用的 jquery-ui 1.8.15 已知在某些事件上有问题（例如 IE 上的 beforeShow()）。
回答by lhan
I came across this issue today and had a different solution work for me. My scenario was that my DatePicker was inside a jQuery UI Dialog popup. Everything worked fine in Chrome, but in IE, the calendar would always reappear after selecting a date.
我今天遇到了这个问题，并为我提供了不同的解决方案。我的场景是我的 DatePicker 位于 jQuery UI 对话框弹出窗口中。在 Chrome 中一切正常，但在 IE 中，日历总是会在选择日期后重新出现。
As it turns out, there is an open bug for this in jQuery 1.10.1: http://bugs.jqueryui.com/ticket/9125
事实证明，在 jQuery 1.10.1 中有一个开放的错误：http: //bugs.jqueryui.com/ticket/9125
There is also a JSFiddlelinked to that demonstrates the bug in IE. There are two ways to get this to work in IE:
还有一个链接到的JSFiddle演示了 IE 中的错误。有两种方法可以让它在 IE 中工作：
- Set
modaltofalse - Focus on another element right after date selection
- 设置
modal为false - 选择日期后立即关注另一个元素
I went with #2, and here is an example of the fix (just updating the JSFiddle code):
我选择了#2，这是修复的示例（仅更新 JSFiddle 代码）：
Markup:
标记：
<div id="dialog">
<input id="datepicker" />
<input type='button' value='save' id='btnSave'/>
</div>
JS:
JS：
$( "#datepicker" ).datepicker({onSelect: function() { $('#btnSave').focus(); }});
$( "#dialog" ).dialog({ modal: true });
Hopefully this helps someone in the future!
希望这对将来的人有所帮助！
回答by elboffor
I use this for IE, it stops the datepicker re-opening too
我将它用于 IE，它也会停止重新打开日期选择器
JQuery:
查询：
onSelect: function(){
$("#focusfix").focus();
},
HTML (first line of the dialog div):
HTML（对话框 div 的第一行）：
<input class="ui-helper-hidden-accessible" id="focusfix" type="text"autofocus/>
回答by Oleg Andreev
Since .browseris removed after jQuery 1.9 I had to slightly modify the code. This works for me:
由于.browser在 jQuery 1.9 之后被删除，我不得不稍微修改代码。这对我有用：
$('#datepicker').datepicker({
/* fix buggy IE focus functionality */
fixFocusIE: false,
onSelect: function(dateText, inst) {
this.fixFocusIE = true;
$(this).change().focus();
},
onClose: function(dateText, inst) {
this.fixFocusIE = true;
this.focus();
},
beforeShow: function(input, inst) {
var result = true;
if (navigator.appName == 'Microsoft Internet Explorer') {
result = !this.fixFocusIE;
}
this.fixFocusIE = false;
return result;
}
}).click(function(){$(this).focus()});
回答by devSouth555
Solution for jQuery > 1.9 in IE <= 9
jQuery > 1.9 in IE <= 9 的解决方案
{fixFocusIE: false},
{onSelect: function(dateText, inst) {
this.fixFocusIE = true;
$(this).change().focus();
}
},
{onClose: function(dateText, inst) {
this.fixFocusIE = true;
this.focus();
}
},
{beforeShow: function(input, inst) {
var result = isIE ? !this.fixFocusIE : true;
this.fixFocusIE = false;
return result;
}
function isIE() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0)
return true;
else
return false;
}
回答by Franky
Try this:
试试这个：
$('#datepicker').datepicker({
onSelect : function(x, u){
$(this).focus();
$(this).datepicker("hide");
},
onClose: function(e){
e.preventDefault();
}
});
here's the fiddle http://jsfiddle.net/VZts7/69/
这是小提琴http://jsfiddle.net/VZts7/69/
Or for IE8:
或者对于IE8：
$('#datepicker').datepicker({
onSelect : function(x, u){
$(this).focus();
},
onClose: function(e){
(this).datepicker("hide");
}
});
even if it's not a perfect solution see working fiddle http://jsfiddle.net/hv77F/2/
即使它不是一个完美的解决方案，请参阅工作小提琴http://jsfiddle.net/hv77F/2/
回答by Stefan Steiger
Necromancing.
I had the same problem, except none of the answers mentioned here worked.
It may be because the code I have to work on works with iframes, but I don't now for sure.
On top, I couldn't update to the latest version, because it would break compatibility with the rest of the project I had to work on.
So this is what fixed it for me:
死灵法术。
我遇到了同样的问题，除了这里提到的答案都不起作用。
这可能是因为我必须处理的代码适用于 iframe，但我现在不确定。
最重要的是，我无法更新到最新版本，因为它会破坏与我必须处理的项目其余部分的兼容性。
所以这就是为我修复它的原因：
initDatePicker: function ()
{
// Initialize datepicker
var qs = document.getElementsByClassName("datepick");
for (var i = 0; i < qs.length; ++i)
{
$(qs[i]).datepicker(
{
// showOn: "button"
// showOn: "both"
showOn: "focus"
, buttonImage: "../images/cal.gif"
, buttonImageOnly: true
//, buttonImageOnly: false
, dateFormat: 'dd.mm.yy'
, changeMonth: true
, changeYear: true
, showWeek: false // true
, firstDay: 1
, showOtherMonths: true //false
, selectOtherMonths: true
, showButtonPanel: true
//,onSelect : function(x, u){
// // $(this).focus();
// window.setTimeout(function () { $("#txtSchulungsTyp").focus(); $(this).datepicker("hide"); }, 300);
//},
//onClose: function(e){
// // e.preventDefault();
// e.preventDefault ? e.preventDefault() : e.returnValue = false;
// return false;
//}
, onSelect: function ()
{
$(this).datepicker('disable');
}
, onClose: function ()
{
window.setTimeout(function (e)
{
$(e).datepicker('enable')
}.bind(undefined, this), 500)
}
})
; // End datepicker
// console.log(mGlobalLanguage);
// $(qs[i]).datepicker("option", $.datepicker.regional['de']);
// $(qs[i]).datepicker("option", $.datepicker.regional['FR']);
} // Next i
}
