选择日期后避免重新打开日期选择器

Question

仅在带有此代码的 IE 中

$('#datepicker').datepicker({
    onSelect : function(x, u){
     $(this).focus();   
    }
});

当我选择一个日期时，日期选择器会重新打开，因为我在onSelect 中添加了$(this).focus();。我该如何解决这个问题？ (Example)

我正在使用 jquery 1.8.2 和 jquery-ui 1.9

Answer 1

我今天遇到了这个问题，并为我提供了不同的解决方案。我的场景是我的 DatePicker 在一个 jQuery UI 对话框弹出窗口中。在 Chrome 中一切正常，但在 IE 中，日历总是会在选择日期后重新出现。

事实证明，在 jQuery 1.10.1 中有一个未解决的错误：http://bugs.jqueryui.com/ticket/9125

还有一个链接到的JSFiddle 演示了 IE 中的错误。有两种方法可以让它在 IE 中工作：

1. 将modal 设置为false
2. 选择日期后立即关注另一个元素

我选择了#2，这里是一个修复示例（只是更新了 JSFiddle 代码）：

标记：

<div id="dialog">
    <input id="datepicker" />
    <input type='button' value='save' id='btnSave'/>    
</div>

JS：

$( "#datepicker" ).datepicker({onSelect: function() { $('#btnSave').focus(); }});
$( "#dialog" ).dialog({ modal: true });

希望这对将来的某人有所帮助！

Answer 2

这是我能得到的最好的解决方法：

（灵感来自this link）

jsFiddle

$('#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()});

请注意您在问题中的建议，我使用的是 jquery-UI 1.9.0。在您的示例中，您使用的是 jquery-ui 1.8.15，已知它在某些事件上存在错误（例如 IE 上的 beforeShow()）。

Answer 3

我在 IE 上使用它，它也会阻止日期选择器重新打开

jQuery:

        onSelect: function(){ 
        $("#focusfix").focus();
    },

HTML（对话框 div 的第一行）：

<input class="ui-helper-hidden-accessible" id="focusfix" type="text"autofocus/>

Answer 4

由于 .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()});

Answer 5

试试这个：

$('#datepicker').datepicker({
onSelect : function(x, u){
 $(this).focus(); 
   $(this).datepicker("hide");     
},
onClose: function(e){
e.preventDefault();
}
});

这是小提琴http://jsfiddle.net/VZts7/69/

或者对于IE8：

$('#datepicker').datepicker({
onSelect : function(x, u){
 $(this).focus();     
},
onClose: function(e){
(this).datepicker("hide");   
}
});

即使它不是一个完美的解决方案，请参阅工作小提琴http://jsfiddle.net/hv77F/2/

Answer 6

IE 中 jQuery > 1.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;
    }

Answer 7

亡灵术。
我遇到了同样的问题，除了这里提到的答案都不起作用。
这可能是因为我必须处理的代码适用于 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 
}