Question

出于某种原因，当使用模式框加上datepicker时，我遇到了与IE和Firefox的不一致的错误。以下是完整的示例代码 - 有人知道如何在单击日期时让IE关闭日历吗？感谢

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>   
    <script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>                                     
        <script type="text/javascript">
        var date_settings = { 
          closeText: 'Close',
          minDate: 0, 
          maxDate: new Date(2014,12,11), 
          buttonImage: "/images/jquery_ui/datepicker.gif",
          buttonImageOnly: false,
            prevText: '&laquo;',
            nextText: '&raquo;',
            currentText: 'Current',
            monthNames: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa'],
            dateFormat: 'dd/mm/yy'         
        };

        var diag_settings = {
          height: 630,
          width:  750,
          modal: true,
          title: 'Post schedule',
          autoOpen: false, 
        };

        $(document).ready(function(){  
          $('input[name="schedule_date"]').datepicker(date_settings);
          $('.sel_date').datepicker(date_settings);

          $("#scheduling").dialog(diag_settings);
          $("#scheduling").dialog('open');

        });

        </script>         
        <div id="scheduling">  
                <div id="primary"> 
                        <input type="text" id="schedule_date" name="schedule_date" style="width:190px;" class="sendWith" value="11/12/2014" /> 
                </div>
        </div>  
</body>
</html>

Answer 1

看看这里有一篇文章可行：

http://www.objectpartners.com/2012/06/18/jquery-ui-datepicker-ie-focus-fix/

如果没有模态框，日期选择器是否表现良好？问题似乎与datepicker有关，而不是与模态框的交互。

问题是你需要$ .browser函数不存在。无论如何，问题看起来像是一个互联网资源管理器故障。更改此代码可以部分解决问题，甚至可以删除$ .browser函数，但它会强制您模糊并选择并模糊并选择在关闭后打开日期选择器。

var date_settings = { 
  closeText: 'Close',
  minDate: 0, 
  maxDate: new Date(2014,12,11), 
  buttonImage: "/images/jquery_ui/datepicker.gif",
  buttonImageOnly: false,
  prevText: '&laquo;',
  nextText: '&raquo;',
  currentText: 'Current',
  monthNames: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
  dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa'],
  dateFormat: 'dd/mm/yy',
  /* fix buggy IE focus functionality */
  fixFocusIE: false,

  /* blur needed to correctly handle placeholder text */
  onSelect: function(dateText, inst) {
        this.fixFocusIE = true;
  },
  onClose: function(dateText, inst) {
        this.fixFocusIE = true;
  },
  beforeShow: function(input, inst) {
        var result = $.browser.msie ? !this.fixFocusIE : true;
        this.fixFocusIE = false;
        return result;
  }
};

即使这个问题也是类似的

http://stackoverflow.com/questions/16689675/datepicker-using-jquery-loses-focus-to-the-textbox-after-date-selected

如果它不起作用，只需删除$。浏览器部分，这在您的特定设置中不可用：

var date_settings = { 
  closeText: 'Close',
  minDate: 0, 
  maxDate: new Date(2014,12,11), 
  buttonImage: "/images/jquery_ui/datepicker.gif",
  buttonImageOnly: false,
  prevText: '&laquo;',
  nextText: '&raquo;',
  currentText: 'Current',
  monthNames: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
  dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa'],
  dateFormat: 'dd/mm/yy',
  /* fix buggy IE focus functionality */
  fixFocusIE: false,

  /* blur needed to correctly handle placeholder text */
  onSelect: function(dateText, inst) {
        this.fixFocusIE = true;
  },
  onClose: function(dateText, inst) {
        this.fixFocusIE = true;
  },
  beforeShow: function(input, inst) {
        var result = !this.fixFocusIE;
        this.fixFocusIE = false;
        return result;
  }
};

如果你没有$ .browser功能，你可以添加这个代码添加到你的javascript文件中，当你确定加载了文档（及其jquery）时。

jQuery.uaMatch = function( ua ) {
    ua = ua.toLowerCase();

    var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
        /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
        /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
        /(msie) ([\w.]+)/.exec( ua ) ||
        ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
        [];

    return {
        browser: match[ 1 ] || "",
        version: match[ 2 ] || "0"
    };
};

// Don't clobber any existing jQuery.browser in case it's different
if ( !jQuery.browser ) {
    matched = jQuery.uaMatch( navigator.userAgent );
    browser = {};

    if ( matched.browser ) {
        browser[ matched.browser ] = true;
        browser.version = matched.version;
    }

    // Chrome is Webkit, but Webkit is also Safari.
    if ( browser.chrome ) {
        browser.webkit = true;
    } else if ( browser.webkit ) {
        browser.safari = true;
    }

    jQuery.browser = browser;
}

在这里寻找一个例子： http://www.deltalink.it/andreab/a.html 互联网资源管理器仍然一团糟，重新打开日历，你必须散焦输入并重新聚焦它。其他浏览器都很好。

IE中的Jquery datepicker和modal

1 个答案: