jQuery glDatePicker 插件无法在 IE 上正确呈现答案

【问题标题】：jQuery glDatePicker plugin not rendering correctly on IEjQuery glDatePicker 插件无法在 IE 上正确呈现
【发布时间】：2015-03-20 16:25:55
【问题描述】：

我正在使用glDatePicker plugin。

页面加载，日历被隐藏（与右侧的框一起）。点击switch-view，重新渲染并显示日历。 Chrome, FF, Safari，一切正常。 IE，没那么多。看起来好像在渲染日历时，width 没有按应有的方式应用。

Chrome

element.style {
  z-index: 1000;
  width: 382px;
  top: 259px;
  left: 766.5px;
  display: block;

如果我在IE 上将宽度更改为382px，它将按应有的方式显示。

<article id="events" class="clearfix hidden-xs">
    <header class="clearfix header-title">
        <h2 class="row col-sm-8">Upcoming Events</h2>
        <a href="/resource-center/calendar-of-events" class="arrow-link gray-medium col-sm-4">All Events <span class="glyphicon glyphicon-arrow-right"></span></a>
    </header>
    <div class="row">
        <section class="col-md-6 col-sm-6">
            <div id="calendar"></div>
        </section>
        <aside id="event-description" class="col-md-6  col-sm-6 gray-light">
            <img src="/content/images/events-backsplash.jpg" class="img-responsive" />
            <div id="event-data">
                ....HTML here - not relevant
            </div>
        </aside>
    </div>
</article>

$('#switch-view').click(function (e) {
    var $this = $(this);
    if ($this.hasClass('list-view')) {
        $('#event-description').hide();

        var $cal = $('#calendar').glDatePicker(true);
        $.extend($cal.options, {
            showAlways: false
        });

        $cal.render();
        $cal.hide();

        $('#calendar-list').fadeIn();
        $this.removeClass('list-view').find('span').text('Calendar View');
    }
    else {
        $this.addClass('list-view').find('span').text('List View');
        $('#calendar-list').hide();
        $('#event-description').fadeIn(function () {
            var $cal = $('#calendar').glDatePicker(true);
            $.extend($cal.options, {
                showAlways: true
            });

            $cal.render();
            $cal.show();
        });
    }

    e.preventDefault();
});

我发现我必须extend 选项并更改showAlways 属性以正确隐藏/显示IE。如果我删除这些，那么在调用 $cal.hide() 函数时日历永远不会隐藏。

你会认为我可以只是hide#calendar，或者它是容器，但是这个插件的操作方式是它在结束 <body> 标签之前创建了一个全新的<div> 并执行它的“位置”魔法”。

【问题讨论】：

你试过了吗：objectpartners.com/2012/06/18/jquery-ui-datepicker-ie-focus-fix？
...这不是 jquery-ui-datepicker
我的错，我现在尝试创建小提琴并解决它
不能在图书馆的小提琴 cos 中重复它，你可以发送示例吗？没有例子很难解决
立即创建小提琴

标签： jquery html internet-explorer

【解决方案1】：

可能不是关于为什么这样做的问题的答案，但不知何故，IE 11 只是没有在page load 上正确收集outerWidth() 和offSet() 方法。

我最终做的是确定浏览器是否实际上是IE 11，然后在日历的初始设置之前设置timeout 或1000ms。

如果有人有更好的答案，我很乐意听到。

欣赏！

【讨论】：